使用敲除的數據綁定選項

Question

我有一個菜單應用於每個顯示的輸入框。 我申請了敲除數據綁定選項。我遇到的問題是將它正確放置在視圖模型中。有人能指出我應該放在哪裏嗎？您將看到菜單出現，但下拉菜單中沒有文字。 感謝

ko.observableArray.fn.pushAll = function(valuesToPush) { 
 
    var underlyingArray = this(); 
 
    this.valueWillMutate(); 
 
    ko.utils.arrayPushAll(underlyingArray, valuesToPush); 
 
    this.valueHasMutated(); 
 
    return this; 
 
}; 
 

 

 

 
function Users(user_id, password) { 
 
    this.user_id = ko.observable(); 
 
    this.password = ko.observable(); 
 
} 
 

 
var viewModel = { 
 
    users: ko.observableArray([]), 
 
    availableCountries: ko.observableArray(['France', 'Germany', 'Spain']), 
 
    addUser: function() { 
 
     this.users.push({ 
 
      user_id: "", 
 
      password: "" 
 
     }); 
 
    }, 
 
    addJSON: function() { 
 
     var JSONdataFromServer = '[{"user_id":"frances","password":"password1"},{"user_id":"joe","password":"password2"}]'; 
 
     var dataFromServer = ko.utils.parseJson(JSONdataFromServer); 
 

 
     // option 1 
 
     //ko.utils.arrayPushAll(this.users(), dataFromServer); 
 
     //this.users.valueHasMutated(); 
 
     // option 2 
 
     //for (var i = 0, j = dataFromServer.length; i < j; i++) 
 
     //this.users.push(dataFromServer[i]); 
 
     //option 3 
 
     this.users.pushAll(dataFromServer); 
 
    } 
 

 
}; 
 

 
viewModel.users(); 
 
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script> 
 
<div class='liveExample'> 
 
    
 
    <form method='POST'> 
 
     <p>You are estimating for <span data-bind='text: users().length'>&nbsp;</span> Resource(s)</p> 
 
     <table data-bind='visible: users().length > 0'> 
 
      <thead> 
 
       <tr> 
 
        <th>Resource</th> 
 
        <th>User Levels</th> 
 
        <th /> 
 
       </tr> 
 
      </thead> 
 
      <tbody data-bind='template: { name: "userRowTemplate", foreach: users }' /> 
 
     </table> 
 
     
 
     <button data-bind='click: addUser'>Add Resource</button> 
 
    
 
    </form> 
 
    
 
    <script id='userRowTemplate' type='text/html'> 
 
     <tr> 
 
<td><input class='required' data-bind='value: user_id, uniqueName: true' /></td> 
 
<td> <select data-bind="options: availableCountries"></select></td> 
 
    
 
      
 
     </tr> 
 
    </script> 
 
    
 
    
 
</div>

Answer 1

你應該在HTML中添加$parent您availableCountries，因爲它是在foreach綁定，看到裏面documentation。

ko.observableArray.fn.pushAll = function(valuesToPush) { 
 
    var underlyingArray = this(); 
 
    this.valueWillMutate(); 
 
    ko.utils.arrayPushAll(underlyingArray, valuesToPush); 
 
    this.valueHasMutated(); 
 
    return this; 
 
}; 
 

 

 

 
function Users(user_id, password) { 
 
    this.user_id = ko.observable(); 
 
    this.password = ko.observable(); 
 
} 
 

 
var viewModel = { 
 
    users: ko.observableArray([]), 
 
    availableCountries: ko.observableArray(['France', 'Germany', 'Spain']), 
 
    addUser: function() { 
 
     this.users.push({ 
 
      user_id: "", 
 
      password: "" 
 
     }); 
 
    }, 
 
    addJSON: function() { 
 
     var JSONdataFromServer = '[{"user_id":"frances","password":"password1"},{"user_id":"joe","password":"password2"}]'; 
 
     var dataFromServer = ko.utils.parseJson(JSONdataFromServer); 
 

 
     // option 1 
 
     //ko.utils.arrayPushAll(this.users(), dataFromServer); 
 
     //this.users.valueHasMutated(); 
 
     // option 2 
 
     //for (var i = 0, j = dataFromServer.length; i < j; i++) 
 
     //this.users.push(dataFromServer[i]); 
 
     //option 3 
 
     this.users.pushAll(dataFromServer); 
 
    } 
 

 
}; 
 

 
viewModel.users(); 
 
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script> 
 
<div class='liveExample'> 
 
    
 
    <form method='POST'> 
 
     <p>You are estimating for <span data-bind='text: users().length'>&nbsp;</span> Resource(s)</p> 
 
     <table data-bind='visible: users().length > 0'> 
 
      <thead> 
 
       <tr> 
 
        <th>Resource</th> 
 
        <th>User Levels</th> 
 
        <th /> 
 
       </tr> 
 
      </thead> 
 
      <tbody data-bind='template: { name: "userRowTemplate", foreach: users }' /> 
 
     </table> 
 
     
 
     <button data-bind='click: addUser'>Add Resource</button> 
 
    
 
    </form> 
 
    
 
    <script id='userRowTemplate' type='text/html'> 
 
     <tr> 
 
<td><input class='required' data-bind='value: user_id, uniqueName: true' /></td> 
 
<td> <select data-bind="options: $parent.availableCountries"></select></td> 
 
    
 
      
 
     </tr> 
 
    </script> 
 
    
 
    
 
</div>