淘汰賽取代綁定模型

我有一個模式對話框添加新模型，併成功ajax提交後，我想能夠鍵入一個新的模型。所以我的邏輯是這樣的：淘汰賽取代綁定模型

按鈕新模式 - >的editViewModel設置爲一個新的模型實例 - >提交按鈕 - >後成功提交設置editviewModel到一個新的模式

function model() { 
    this.name = ko.observable(""); 
} 

var myViewModel = new model(); 
myViewModel.name("Name 1"); 
ko.applyBindings(myViewModel, document.getElementById('foo')); 

function newViewModel() { 
    myViewModel = new model(); 
    myViewModel.name("NewName"); 
    //ko.applyBindings(myViewModel, document.getElementById('foo')); 
}

小提琴： http://jsfiddle.net/56gkz/

爲了得到這個工作，我必須在將editViewModel更改爲新模型實例後重新應用綁定。那麼，它是再次應用綁定的正確方式還是有更好的解決方案來處理這種情況？

來源

2012-11-29 kannix

通常您會想要創建一個總體視圖模型，您只需將applyBindings調用一次，然後添加一個用於交換和切出要編輯的模型的可觀察值。然後，在您的標記中，您可以使用with綁定將一段標記綁定到該可觀察對象的當前值。

JS代碼可能看起來像：

function Model(name) { 
    this.name = ko.observable(name); 
} 

function RootViewModel() { 
    var self = this; 

    this.selectedModel = ko.observable(); 
    this.models = ko.observableArray(); 

    this.createModel = function() { 
     self.selectedModel(new Model("New Name")); 
    }; 

    this.acceptModel = function(model) { 
     self.models.push(model); 
     self.selectedModel(null); 
    };  

    //initialize with a model to start 
    this.createModel();  
}; 


ko.applyBindings(new RootViewModel());

喜歡的標記：

<div data-bind="with: selectedModel"> 
    <input data-bind="value: name" /> 
    <button data-bind="click: $root.acceptModel">Accept</button> 
</div> 

<button data-bind="click: createModel">New Model</button> 

<hr/> 

<ul data-bind="foreach: models"> 
    <li data-bind="text: name"></li> 
</ul>

樣品在這裏：http://jsfiddle.net/rniemeyer/RWYL6/

來源

2012-11-29 18:01:45

在我真正的應用程序，我通過AJAX加載編輯對話框，這樣我有兩種不同的視圖模型，但缺少的部分是我可以使整個editModel可觀察到以獲得更改:) – kannix

淘汰賽取代綁定模型

回答

相關問題