knockoutjs 视图模型结构 - 需要提示

Question

我正在构建一个带有 knockout js 的应用程序，当我单击 'edit' link 编辑单个 'soggetto' 时，我收到消息 'Uncaught TypeError: undefined is not a function'。

两个问题：

错误是什么？
我的视图模型设计正确吗？

这是我的视图模型（这里略作简化）

var Soggetto= function(id,nome,citta){
    var self=this;
    self.id=ko.observable(id);
    self.nome=ko.observable(nome);
    self.citta=ko.observable(citta);
};

var Danneggiato=function(idSoggetto,danno,altro){
    var self=this;
    self.idSoggetto=ko.observable(idSoggetto);
    self.danno=ko.observable(danno);
    self.altro=ko.observable(altro);
};

var ViewModel = function(soggetti,idContraente,presenti,danneggiati){
    var self=this;
    self.soggetti=ko.observableArray(soggetti);
    self.contraente=ko.observable(idContraente);
    self.presenti=ko.observableArray(presenti);
    self.danneggiati=ko.observableArray(danneggiati);

    self.selectedItem= ko.observable();

    self.getSoggetto=function   (id){
       var match = ko.utils.arrayFirst(self.soggetti(), function (item) {
            return ko.utils.unwrapObservable(id) == item.id();
        });
        if (match) {
            self.selectedItem(match);
            return match;
        }
        else
            return null;  
    };

};

var VM = new ViewModel([new Soggetto(1,'Pippo','Milano'),new Soggetto(2,'Pluto','Roma'),new Soggetto(3,'Paperino','Arnasco'),new Soggetto(4,'Paperoga','Genova')]
                       ,2
                       ,[3,1]
                       ,[new Danneggiato(4,250.00,''),new Danneggiato(2,153.50,'')]
                      );

ko.applyBindings(VM);

这是标记：

<div >
    <label>contraente: </label>
    <select data-bind="options: soggetti, value: contraente, optionsText: 'nome',optionsValue:'id'"></select>
    <br/>
    <label>presenti: </label>
   <ul data-bind="foreach: presenti">
                <li>
                    <span data-bind="text: $root.getSoggetto($data).nome"> </span>
                    <a data-bind="click:$root.getSoggetto($data)">edit</a>
       </li>
    </ul>
     <br/>
    <label>danneggiati: </label>
   <ul data-bind="foreach: danneggiati">
                <li>
                    <span data-bind="text: $root.getSoggetto(idSoggetto).nome"> </span>
                    <span data-bind="text: danno"> </span>
                    <a data-bind="click:$root.getSoggetto(idSoggetto)">edit</a>
       </li>
    </ul>
 </div>
<div data-bind="with:selectedItem">
    <label>id: </label><span data-bind="text:id"></span>
    <br/>
    <label>nome: </label><input data-bind="value:nome"></input>
    <br/>
    <label>citta: </label><input data-bind="value:citta"></input>
</div>

这是jsfiddle

Answer 1

问题是您点击绑定 return 对象。您不应该 return 来自 onclick 的任何内容。修复错误的最简单解决方案是将 getSoggetto 包装在另一个不包含 return:

的包装中

self.getSoggettoClick = function (id) {
    self.getSoggetto(id);
};

jsFiddle

关于第二个问题，我觉得对象的结构有点不对。我会尝试将对象嵌套为彼此的子对象，而不是使用 id link 它们。

knockoutjs 视图模型结构 - 需要提示

knockoutjs viewmodel structure - hint needed

knockout.js