嘗試使用knockout.js和獲得未定義

，如果我做了一些愚蠢的我在這裏新的淘汰和相當新的JavaScript所以道歉，設置一個ID爲元素...嘗試使用knockout.js和獲得未定義

我使用的淘汰賽。 js（3.4.2）維護一個依賴列表，我有添加和刪除工作正常，但我想在一個元素上設置一個ID來允許我只讀。我已經根據我的代碼來做到這一點的淘汰賽爲例，其工作的例子可以在這裏看到：Demo

當我運行我的代碼標識設置爲undefined：

<input data-bind="uniqueId: dependantName, value: dependantName" id="undefined" type="text">

我的JS代碼小提琴 https://jsfiddle.net/zacmarshall/khb13ha4/

HTML：

<!DOCTYPE html> 
<head> 
    <script src="javascripts/vendor/knockout-3.4.2.js" type="text/javascript"></script> 
    <script src="javascripts/vendor/jquery-1.11.1.min.js"></script> 
    <script src="javascripts/vendor/jquery.validate.js" type="text/javascript"></script> 
<head> 


<body> 

    <input data-bind="value: newDependantName" /> 
    <input data-bind="value: newDobDD" /> 
    <button data-bind="click: addDependant">Add</button> 

    <pre data-bind="text: ko.toJSON($data, null, 2)"></pre> 

    <table> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Date of Birth</th> 
       <th></th> 
      </tr> 
     </thead> 
     <tbody id="qualifications-summary" data-bind="foreach: dependants"> 
      <!--div data-bind="uniqueId: dependantName"--> 
      <div> 
       <tr> 

        <td><label data-bind="uniqueFor: dependantName">Before</label> 
         <input type="text" data-bind="uniqueId: dependantName, value: dependantName"/> 
        </td> 
        <td><input data-bind="value: dobDD" /></td> 
        <td><input data-bind="value: itemIndex"/></td> 
        <td><a href="#" data-bind="click: $root.removeDependant">Remove</a></td> 

       </tr> 
      </div> 
     </tbody> 

    </table> 

</body>

的javascript：

function Dependant(data) { 
    this.itemIndex = ko.observable(0); 
    this.dependantName = ko.observable(data.dependantName); 
    this.dobDD = ko.observable(data.dobDD); 
    this.readOnly = ko.observable(data.readOnly); 
    this.showEditButton = ko.observable(data.showEditButton); 
} 



function DependantListViewModel() { 
    // Data 
    var self = this; 

    self.dependants = ko.observableArray([]); 
    self.newDependantName = ko.observable(); 
    self.newDobDD = ko.observable(); 
    self.readOnly = ko.observable(); 
    self.showEditButton = ko.observable(); 
    self.itemIndex = ko.observable(); 

    var i = 0; 

    // Operations 
    self.addDependant = function() { 


     var data1 = { itemIndex : (i), 
         dependantName : this.newDependantName(), 
         dobDD : this.newDobDD(), 
         readOnly : "readonly", 
         showEditButton : (!0) 
         }; 
     self.dependants.push(data1); 
     self.newDependantName(""); 
     self.newDobDD(""); 
     i++ 
    }; 
    self.removeDependant = function(dependant) { self.dependants.remove(dependant) }; 

    self.editDependant = function(i) { 
     console.log("editedDependant"); 
     self.readOnly(undefined); 
     self.showEditButton(!1) 
    }; 
    self.saveDependantItem = function(self) { 
     self.readOnly("readonly"), self.showEditButton(!0) 
    }; 

} 

ko.bindingHandlers.uniqueId = { 

    init: function(element, valueAccessor) { 
     var value = valueAccessor(); 
     value.id = value.id || ko.bindingHandlers.uniqueId.prefix + (++ko.bindingHandlers.uniqueId.counter); 
     console.log("in handler"); 
     element.id = value.id; 
    }, 
    counter: 0, 
    prefix: "unique" 
}; 


ko.bindingHandlers.uniqueFor = { 
    init: function(element, valueAccessor) { 
     var value = valueAccessor(); 
     value.id = value.id || ko.bindingHandlers.uniqueId.prefix + (++ko.bindingHandlers.uniqueId.counter); 

     element.setAttribute("for", value.id); 
    } 
}; 

ko.applyBindings(new DependantListViewModel());

來源

2017-08-09 Zac Marshall

的錯誤指的是這在你的init：

var value = valueAccessor(); // this is undefined 
value.id = value.id // therefore this falls over

這是問題：

self.dependants.push(data1);

它應該是：

self.dependants.push(new Dependant(data1));

，然後更新您的Dependant模型，通過指數：

this.itemIndex = ko.observable(data.itemIndex);

這裏是一個工作Fiddle

來源

2017-08-09 11:35:17

謝謝。這也解決了屏幕上未發生變化的問題。看看我每行有多列的例子，它們並沒有立即更新，所以我一直認爲這是它的工作方式，我將不得不導出數組（因爲某些原因，它儘管導出了數據信息它在更改時沒有顯示出來）。 –

嘗試使用knockout.js和獲得未定義

回答

相關問題