在knockout.js中使用多視圖模型

我想讓我的淘汰賽腳本更有條理，此外，我想避免將兩個函數命名爲偶然事件。所以我在想，如果我能像這樣同一個函數嵌套的ViewModels（我一直是真的簡單）：Fiddle 在knockout.js中使用多視圖模型

這裏的HTML

<p>First name: <strong data-bind="text: other.firstName">todo</strong></p> 
<p>Last name: <strong data-bind="text: other.lastName">todo</strong></p> 
<p>Full name: <strong data-bind="text: other.fullName">todo</strong></p>

和JS：

function AppViewModel() { 
    var self = this; 
    self.other = { 
     firstName: ko.observable("Bert"), 
     lastName: ko.observable("Bertington"), 
     /*fullName: ko.computed(function(){ 
      return this.firstName + " " + this.lastName; 
      }, this)*/ 

     } 
}

這工作正常，但如果我取消註釋ko.computed，它會崩潰。有沒有什麼辦法可以用這種方式來組織我的淘汰賽，爲什麼計算機會崩潰，是否有任何方法來編寫ko.computed函數，以便它可以工作？

編輯：問題＃2

如果我有一個表格任何形式是這樣的：

<form data-bind="submit: other.otherSubmit" data-ajax="false"> 
    <button type="submit">Submit</button> 
</form>

，我添加處理程序提交，像這樣：

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI 
    function AppViewModel() { 
     var self = this; 
     self.other = new function(){  
      var self = this; 
      self.firstName = ko.observable("Bert"); 
      self.lastName = ko.observable("Bertington"); 
      self.fullName = ko.computed(function(){    
       return self.firstName() + " " + self.lastName(); 
       }); 
      self.otherSumbit = function(){} 
      } 
    } 

// Activates knockout.js 
ko.applyBindings(new AppViewModel());

爲什麼錯誤控制檯是否返回：

該值的提交綁定必須是一個函數

來源

2013-02-21 Likwid_T

謝謝你兩個事實證明，我寫的程序中缺少的是我寫了self.other = function（）{...而不是self.other = new function（）{... the 「新」基本上使我的整個計劃正常工作 – 2013-02-21 13:42:59

可以試試這個：

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI 
    function AppViewModel() { 
     var self = this; 
     self.other = new function(){  
      var self = this; 
      self.firstName = ko.observable("Bert"); 
      self.lastName = ko.observable("Bertington"); 
      self.fullName = ko.computed(function(){    
       return self.firstName() + " " + self.lastName(); 
       });   
      } 
    } 

// Activates knockout.js 
ko.applyBindings(new AppViewModel());

來源

2013-02-21 02:05:30

一個技術，我用它來組織我的VM採用淘汰賽：

//load view 
    $.get(url, function(view){ 
     $("#content').html(view); 
     ko.applyBindings(new myVM(), $('#content')[0]); 
    })

來源

2013-02-21 02:28:10

的問題在你的第一種情況是，在這種情況下，this引用了視圖模型。在你的對象字面值中，你的對象還沒有存在，所以你不能以這種方式設置你的計算觀察值。在創建對象後，您必須將其添加到對象中。

無論是這樣的（這是醜陋）：

function AppViewModel() { 
    var self = this; 
    self.other = { 
     firstName: ko.observable('Bert'), 
     lastName: ko.observable('Bertington') 
    }; 
    self.other.fullName = ko.computed(function() { 
     return this.firstName() + ' ' + this.lastName(); 
    }, self.other); 
}

或像這樣（如你在你的第二個例子同樣完成）：

function AppViewModel() { 
    var self = this; 
    self.other = new function() { 
     this.firstName = ko.observable('Bert'); 
     this.lastName = ko.observable('Bertington'); 
     this.fullName = ko.computed(function() { 
      return this.firstName() + ' ' + this.lastName(); 
     }, this); 
    }; 
}

當然還有其他的方法你可以寫上面的例子，但你明白我的觀點。

在你的第二個例子中，你拼錯了你的函數。在視圖模型中，它被命名爲otherSumbit，而您的視圖有otherSubmit。

來源

2013-02-21 02:51:07

謝謝，讓我嘗試一些東西，我肯定會在幾分鐘內接受 – 2013-02-21 13:05:49

如果有人找了這種解決方案的解決方案，請嘗試以下方法

HTML視圖

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
    <div id="container1"> 
     <ul> 
      <li >Container1 item</li> 
      <!-- ko foreach: myItems --> 
      <li>Item <span data-bind="text: $data"></span></li> 
      <!-- /ko --> 
     </ul> 
    </div> 

    <div id="container2"> 
     <ul> 
      <li >Container2 item</li> 
      <!-- ko foreach: myItems --> 
       <li>Item <span data-bind="text: $data"></span></li> 
      <!-- /ko --> 
     </ul> 
    </div> 

    <script src="js/jquery-1.11.1.js"></script> 
    <script src="js/knockout-3.0.0.js"></script> 
    <script src="js/DataFunction.js"></script> 
    <script src="js/Container1ViewModel.js"></script> 
    <script src="js/Container2ViewModel.js"></script> 

</body> 
</html>

對於這個觀點我創建2個ID = container1和id = container2的視圖模型在兩個單獨的JavaScript文件中。

Container1ViewModel.js

function Container1ViewModel() 
{ 
    var self = this; 
    self.myItems = ko.observableArray(); 
    self.myItems.push("ABC"); 
    self.myItems.push("CDE"); 

}

Container2ViewModel.js

function Container2ViewModel() { 
    var self = this; 
    self.myItems = ko.observableArray(); 
    self.myItems.push("XYZ"); 
    self.myItems.push("PQR"); 

}

然後將這些2周的ViewModels在DataFunction.js

var container1VM; 
var container2VM; 

$(document).ready(function() { 

    if ($.isEmptyObject(container1VM)) { 
     container1VM = new Container1ViewModel(); 
     ko.applyBindings(container1VM, document.getElementById("container1")); 
    } 

    if ($.isEmptyObject(container2VM)) { 
     container2VM = new Container2ViewModel(); 
     ko.applyBindings(container2VM, document.getElementById("container2")); 
    } 
});

註冊爲獨立的ViewModels篩選後，您可以添加任意數量的視圖模型爲單獨的div。但請確保不要爲註冊div內的div創建單獨的視圖模型。

來源

2015-08-12 19:32:40

在knockout.js中使用多視圖模型

回答

相關問題