2016-08-07 18 views
-1

Wenn ich beide ko.js zusammensetze, wird einer von ihnen vom ersten Schatten überschattet, ich meine, der zweite hört auf zu arbeiten und nur der erste funktioniert, wie kann ich sie zusammenfügen und ohne sie funktionieren lassen Probleme. getrennt funktionieren sie gut, nur nicht zusammen, warum ist das?Knockout.js dupliziertes Skript

var z = 1; //value to make div overlappable 
 

 
$('#addText').click(function (e) { 
 
    /** Make div draggable **/ 
 
    $('<div />', { 
 
     class: 'ui-widget-content1', 
 
     appendTo: '.container4', 
 
     draggable: { 
 
      containment: 'parent1', 
 
      start: function(event, ui) { 
 
       $(this).css('z-index', ++z); 
 
      } 
 
     } 
 
    }); 
 
}); 
 

 

 
$(document).on("dblclick", '.text1', function() 
 
{ 
 
    $(this).hide(); $(this).closest('.item1').find('.edit_text1').val($(this).text()).show(); 
 
}); 
 

 
$(document).on("click", ".edit_text1", function() 
 
{ 
 
    return false; 
 
}); 
 

 

 
$(document).on("click", function() 
 
{ 
 
    var editingText = $('.edit_text1:visible'); 
 
    if (editingText.length) 
 
    { 
 
     editingText.hide(); 
 
     editingText.closest('.item1').find('.text1').text($(editingText).val()).show(); 
 
    } 
 
}); 
 

 

 
    var count = 1; 
 
var selectedDraggable; 
 

 
ko.bindingHandlers.draggable={ 
 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel2) { 
 
     $(element).draggable(); 
 
     $(element).addClass('item1' + count); 
 
     count++; 
 
     $(element).on('click', function() { 
 
      selectedDraggable = $(this); 
 
     }) 
 
    } 
 
}; 
 

 

 
var vm=function(){ 
 
    var self=this; 
 
    self.items1=ko.observableArray(); 
 
    self.textContent1 = ko.observable(''); 
 
    self.init=function(){ 
 
     self.items1([]); 
 
    } 
 
    self.remove=function(item){ 
 
     console.log(item); 
 
     self.items1.remove(item); 
 
    } 
 
    self.addNew1 = function() { 
 
     self.items1.push(self.textContent1()); 
 
     self.textContent1(''); 
 
    } 
 
    self.init(); 
 
} 
 

 
ko.applyBindings(new vm());​ 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
var z = 1; //value to make div overlappable 
 

 
$('#addText').click(function (e) { 
 
    /** Make div draggable **/ 
 
    $('<div />', { 
 
     class: 'ui-widget-content', 
 
     appendTo: '.container', 
 
     draggable: { 
 
      containment: 'parent', 
 
      start: function(event, ui) { 
 
       $(this).css('z-index', ++z); 
 
      } 
 
     } 
 
    }); 
 
}); 
 

 

 
$(document).on("dblclick", '.text', function() 
 
{ 
 
    $(this).hide(); $(this).closest('.item').find('.edit_text').val($(this).text()).show(); 
 
}); 
 

 
$(document).on("click", ".edit_text", function() 
 
{ 
 
    return false; 
 
}); 
 

 

 
$(document).on("click", function() 
 
{ 
 
    var editingText = $('.edit_text:visible'); 
 
    if (editingText.length) 
 
    { 
 
     editingText.hide(); 
 
     editingText.closest('.item').find('.text').text($(editingText).val()).show(); 
 
    } 
 
}); 
 

 

 
    var count = 1; 
 
var selectedDraggable; 
 

 
ko.bindingHandlers.draggable={ 
 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel1) { 
 
     $(element).draggable(); 
 
     $(element).addClass('item' + count); 
 
     count++; 
 
     $(element).on('click', function() { 
 
      selectedDraggable = $(this); 
 
     }) 
 
    } 
 
}; 
 

 

 
var vm=function(){ 
 
    var self=this; 
 
    self.items=ko.observableArray(); 
 
    self.textContent = ko.observable(''); 
 
    self.init=function(){ 
 
     self.items([]); 
 
    } 
 
    self.remove=function(item){ 
 
     console.log(item); 
 
     self.items.remove(item); 
 
    } 
 
    self.addNew = function() { 
 
     self.items.push(self.textContent()); 
 
     self.textContent(''); 
 
    } 
 
    self.init(); 
 
} 
 

 
ko.applyBindings(new vm()); 
 
​

+1

Sie hat vier Fragen vor kurzem gefragt, die alle sehr ähnlich, mit [dem anderen] (http://stackoverflow.com/q/38780024/419956) möglicherweise sogar ein direktes Duplikat. Diejenigen, die Code in ihnen haben, haben * viel * davon. Ich schlage vor, dass Sie die Hilfe ein wenig durchlesen, Ihre vorhandenen Fragen verbessern und nicht immer neue Fragen stellen (oder erklären, wie sie miteinander verwandt sind/anders sind). – Jeroen

Antwort

0

Wie @Jeroen erwähnt, sollten Sie Ihren Code ein minimal, complete, and verifiable example reduzieren.

Knockout wendet seine Bindungen jedoch auf das gesamte DOM an. Es macht keinen Sinn, applyBindings für das gesamte DOM mehr als einmal aufzurufen. Wenn Sie andere Ansicht Modelle haben für verschiedene Teile Ihrer Seite, pass the DOM element Sie jede Ansicht Modell binden mögen während applyBindings:

ko.applyBindings(new vm(), document.getElementById('someElementId'))