我怎樣才能在我的viewmodel在knockout.js中工作多個視圖

Question

我能夠讓我的ViewModel的ImagesInputView工作，但其他兩個不會。我知道他們不工作的方式是我不能刪除其他兩個，他們添加的數量超過了我允許的數量。

這裏是我的html代碼：

<div id="image_inputs" class="image_gallery_area"> 
       <table> 
        <thead> 
         <tr> 
          <th> 
           <label class="ae_field_label">Images:</label> 
          </th> 
          <th></th> 
         </tr> 
        </thead> 
        <tbody data-bind="foreach: imageInput"> 
         <tr> 
          <td> 
           <input class="ae_filed_value" type="file" data-bind="value: value" /> 
          </td> 
          <td> 
           <button type="button" class="minus" data-bind="click: $root.removeImageInput">X</button> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
       <button type="button" class="plus" data-bind="click: addImageInput, enable: imageInput().length < 8">Add Image</button> 
      </div> 
      <div id="app_inputs" class="app_link_area"> 
       <table> 
        <thead> 
         <tr> 
          <th><label class="ae_field_label">App Download Links:</label></th> 
          <th></th> 
          <th></th> 
         </tr> 
        </thead> 
        <tbody data-bind="foreach: appInput"> 
         <tr> 
          <td> 
           <label class="ae_field_label" for="appLinkName">Link Name:</label> 
          </td> 
          <td> 
           <input class="ae_filed_value" data-bind="value: appLinkName" maxlengthe="255" /> 
          </td> 
          <td rowspan="2"> 
           <button type="button" class="minus" data-bind="click: $root.appInput">X</button> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <label class="ae_field_label" for="appURL">URL:</label> 
          </td> 
          <td> 
           <input class="ae_filed_value" data-bind="value: appURL" maxlengthe="255" /> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
       <button type="button" class="plus" data-bind="click: appInput, enable: appInput().length < 4">Add App Input</button> 
      </div> 
      <div id="web_link_inputs" class="web_thumbs_area"> 
       <table> 
        <thead> 
         <tr> 
          <th> 
           <label class="ae_field_label">Web Thumbnail Links:</label> 
          </th> 
          <th></th> 
          <th></th> 
         </tr> 
        </thead> 
        <tbody data-bind="foreach: webLinkInput"> 
         <tr> 
          <td> 
           <label class="ae_field_label" for="webLinkName">Link Name:</label> 
          </td> 
          <td> 
           <input class="ae_filed_value" data-bind="value: webLinkName" maxlengthe="255" /> 
          </td> 
          <td rowspan="2"> 
           <button type="button" class="minus" data-bind="click: $root.webLinkInput">X</button> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <label class="ae_field_label" for="webURL">URL:</label> 
          </td> 
          <td> 
           <input class="ae_filed_value" data-bind="value: webURL" maxlengthe="255" /> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
       <button type="button" class="plus" data-bind="click: webLinkInput, enable: webLinkInput().length < 2">Add Web Thumbnail</button> 
      </div> 

這裏是我的淘汰賽代碼：

function ImageInputView (value){ 
     var self = this; 
     self.value = value 
    } 
    function AppLinkView (appLinkName, appURL){ 
     var self = this; 
     self.appLinkName = appLinkName; 
     self.appURL = appURL; 
    } 
    function WebLinkView (webLinkName, webURL){ 
     var self = this; 
     self.webLinkName = webLinkName; 
     self.webURL = webURL; 
    } 

    function ViewModel(){ 
     var self = this; 

     self.imageInput = ko.observableArray(); 
     self.addImageInput = function() { 
      self.imageInput.push(new ImageInputView("")); 
     } 
     self.removeImageInput = function(imageInput) { 
      self.imageInput.remove(imageInput); 
     } 

     self.appInput = ko.observableArray(); 
     self.addAppInput = function() { 
      self.appInput.push(new AppLinkView("","")); 
     } 
     self.removeAppInput = function(appInput) { 
      self.appInput.remove(appInput); 
     } 

     self.webLinkInput = ko.observableArray(); 
     self.addWebLinkInput = function() { 
      self.webLinkInput.push(new WebLinkView("","")); 
     } 
     self.removeWebLinkInput = function(webLinkInput) { 
      self.webLinkInput.remove(webLinkInput); 
     } 
    } 

    ko.applyBindings(new ViewModel()); 

這裏是我的jsFiddle

我得到一個 「RefferenceError：不定義VARIABLENAME」 在我的JavaScript錯誤。

非常感謝您的幫助。我是新來的淘汰賽，並且已經在這裏呆了幾個小時，似乎無法弄清楚或在我的搜索中找到任何有用的來源。

Answer 1

這裏是工作http://jsfiddle.net/qj3y9/

你失蹤了幾件事

這

<button type="button" class="plus" data-bind="click: appInput, enable: appInput().length < 4">Add App Input</button> 

必須改變，以

<button type="button" class="plus" data-bind="click: addAppInput, enable: appInput().length < 4">Add App Input</button> 

同爲

小提琴

<button type="button" class="plus" data-bind="click: webLinkInput, enable: webLinkInput().length < 2">Add Web Thumbnail</button> 

必須改變，以

<button type="button" class="plus" data-bind="click: addWebLinkInput, enable: webLinkInput().length < 2">Add Web Thumbnail</button> 

而且你刪除按鈕不綁定到視圖模型的正確的函數。你可以看小提琴現在已經修好了。