使用knockout.js將數組綁定到視圖模型

有沒有一種方法來定義數組並將其綁定到視圖模型？或者它必須被定義爲對象?:使用knockout.js將數組綁定到視圖模型

---- ---- JS

 
var arr = [{"id":"1","desc":"1","enabled":true,"tabStr":"/2 * * * * * *"}, 
      {"id":"2","desc":"2","enabled":true,"tabStr":"1-60/2 * * * * * *"}, 
      {"id":"3","desc":"3","enabled":false,"tabStr":"/5 * * * * * *"}]; 

$(document).ready(function(){ 
    ko.applyBindings(arr); 
});

----- ---- HTML

<tbody data-bind="foreach: ???"> 
     <tr> 
     <td data-bind="text: id"></td> 
     <td data-bind="text: desc"></td> 
     <td data-bind="text: tabStr"></td> 
     <td data-bind="text: enabled"></td> 
     </tr> 
    </tbody>

來源

2012-09-08 zcaudate

如果

您不想將數組包裝到對象中，則可以使用特殊上下文變量$data（或$root，因爲這是頂級視圖模型）與當前數據綁定。所以，你的綁定看起來像：

<tbody data-bind="foreach: $data"> 
    <tr> 
    <td data-bind="text: id"></td> 
    <td data-bind="text: desc"></td> 
    <td data-bind="text: tabStr"></td> 
    <td data-bind="text: enabled"></td> 
    </tr> 
</tbody>

您可以找到有關這些內容變量這裏的更多信息：http://knockoutjs.com/documentation/binding-context.html

來源

2012-09-08 14:50:31

我試圖$根，但沒有奏效。將有一個去$ data – zcaudate

除非您的數據更多，否則''root''和'$ data'對於您在頂層應該是相同的。聽起來像你得到它的工作。 –

而不是「改編」，我使用MVC，所以我用Model（我離開了我的版本什麼，我會爲「ARR」使用），並有@using IEnumerable<MyViewModel>在我的視圖頂部，和我有控制器做這樣的事情：

public ActionResult Index() { 
    var data = myDataContext.SomeTable.Where(e => e.blah == "Foo"); 
    return View(data); 
}

這將返回喜歡你arr，所以我覺得我的下面的代碼應該可以工作對你罰款：

<table border="1" width="100%" data-bind="foreach: mainArray"> 
    <tr> 
     <td width="25%">ID</td> 
     <td width="25%">Desc</td> 
     <td width="25%">Enabled</td> 
     <td width="25%">TabStr</td> 
    </tr> 
    <tr> 
     <td width="25%" data-bind="text: id"></td> 
     <td width="25%" data-bind="text: desc"></td> 
     <td width="25%" data-bind="text: tabStr"></td> 
     <td width="25%" data-bind="text: enabled"></td> 
    </tr> 
</table> 
<script language="type/Javascript"> 
    var arr = [{"id":"1","desc":"1","enabled":true,"tabStr":"2"}, 
     {"id":"2","desc":"2","enabled":true,"tabStr":"1-60"}, 
     {"id":"3","desc":"3","enabled":false,"tabStr":"5"}]; 
    //var arr = [@Html.Raw(Json.Encode(Model))][0]; 

    $(function() { 

     var myViewModel = new MyViewModel(arr); 
     ko.applyBindings(myViewModel); 

     function MyViewModel(arr) { 
      var self = this; 
      self.mainArray = ko.observableArray([]); 

      if (arr.length > 0) { 
       for (var i=0; i<arr.length; i++) { 
        var myDataViewModel = new MyDataViewModel(arr[i]); 
        self.mainArray.push(myDataViewModel); 
       } 
      } 
     } 

     function MyDataViewModel(vm) { 
      //alert(vm.id); 
      var self = this; 
      if (vm != null) {      
       self.id = ko.observable(vm.id); 
       self.desc = ko.observable(vm.desc); 
       self.enabled = ko.observable(vm.enabled); 
       self.tabStr = ko.observable(vm.tabStr); 
      } else { 
       self.id = 0; 
       self.desc = 0; 
       self.enabled = true; 
       self.tabStr = 0; 
      } 
     } 
    }); 

</script>

工作的jsfiddle這裏：http://jsfiddle.net/navyjax2/y75hcr2L/

來源

2015-02-14 06:03:03 vapcguy

使用knockout.js將數組綁定到視圖模型

回答

相關問題