knockoutjs viewmodel结构 - 需要提示

时间:2015-01-15 09:30:38

标签: knockout.js

我正在构建一个app whit knockout js,当我点击“编辑”链接编辑单个'soggetto'时,我收到消息'Uncaught TypeError:undefined is not function'。

两个问题:

  • 错误是什么?
  • 我的viewmodel设计是否正确?

这是我的视图模型(这里稍作简化)

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

1 个答案:

答案 0 :(得分:0)

问题是你点击绑定正在返回一个对象。你不应该从onclick返回任何东西。解决错误的最简单方法是将getSoggetto包装在另一个不返回的解决方案中:

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

jsFiddle

关于第二个问题,我认为对象的结构有点偏。我会尝试将对象嵌套为彼此的子对象,而不是使用id来链接它们。