правильный способ кодирования наблюдаемого объекта в наблюдаемом массиве с помощью нокаута

Question

Ниже мой взгляд код модели

var TopicsViewModel = function() { 
var self = this; 

var fakeTopicData = []; 


self.Topic = function(area, name, link, desc, why) { 
    self.area = ko.observable(area ? area : ""); 
    self.name = ko.observable(name ? name : ""); 
    self.link = ko.observable(link ? link : ""); 
    self.desc = ko.observable(desc ? desc : ""); 
    self.why = ko.observable(why ? why : ""); 
}; 


self.createProfile = function() { 
    alert("came to create profile"); 
}; 

self.editProfile = function() { 
    alert("came to edit profile"); 
}; 

self.removeProfile = function (profile) { 
    alert("came to remove profile"); 

    self.topicsArr.remove(profile); 
}; 



var refresh = function() { 
    fakeTopicData.push(new self.Topic("Functional Prog", "Javascript", "http:\\www.somedummysite.com", "somedesc", "Just because")); 
    fakeTopicData.push(new Topic("ASP.NET ", "MVC5", "http:\\www.somedummysite.com", "somedesc2", "Just because2")); 


    self.topicsArr(fakeTopicData); 
}; 


self.topicsArr = ko.observableArray([]); 
refresh(); 

    }; 
    ko.applyBindings(new TopicsViewModel()); 

Вот мой взгляд код

<hr /> 
<hr /> 
@*<input type="button" class="btn-sm" value="New Topic" data-bind="click:clickevent" />*@ 
<table class="table table-striped table-bordered table-condensed"> 
    <tr > 
     <th>Area</th> 
     <th>Name</th> 
     <th>Link</th> 
     <th>Link</th> 
     <th>Description</th> 
     <th>Why</th> 

    </tr> 
    <tbody data-bind="foreach : topicsArr"> 
     <tr> 
      <td data-bind="text:area"> </td> 
      <td class=""><a data-bind="text:name, click:$parent.editProfile"></a></td>     
      <td data-bind="text:link"> </td> 
      <td> <input data-bind="text:link"></> </td> 
      <td data-bind="text:desc"> </td> 
      <td data-bind="text:why" ></td> 
      <td><button class="btn btn-mini btn-danger" data-bind="click:$parent.removeProfile">remove</button></td> 
     </tr> 


    </tbody> 
</table> 

@ * @

Я надеялся, что когда пользователь внесет изменения в поле ввода, значение будет отражено в объекте модели. Но когда я запускаю это приложение, я становлюсь ниже ошибки

0x800a139e - Ошибка выполнения JavaScript: не удается выполнить синтаксический анализ привязок.

Сообщение: ReferenceError: 'area' undefined;

Не мог бы кто-нибудь указать мне, что я делаю неправильно здесь.

Answer 1

Чтобы получить код работает, вы можете добавить if condition в свой HTML. Эксперты могут указать на точную ошибку Рекха :).

<tbody data-bind="foreach: topicsArr"> 
    <!-- ko if: $parent.topicsArr != 'undefined' --> 
    <!-- ko if: $parent.topicsArr.length > 0 --> 
    <tr> 
     <td data-bind="text: area"></td> 
     <td class=""><a data-bind="text: name, click: $parent.editProfile"></a></td> 
     <td data-bind="text: link"></td> 
     <td> 
      <input data-bind="text: link"></> </td> 
     <td data-bind="text: desc"></td> 
     <td data-bind="text: why"></td> 
     <td> 
      <button class="btn btn-mini btn-danger" data-bind="click: $parent.removeProfile">remove</button></td> 
    </tr> 
    <!-- /ko --> 
    <!-- /ko --> 
</tbody> 

Хорошо, когда вы смотрите на вас TopicsViewModel, вы увидите что-то вроде ниже: -

Так что вам нужно $parent, чтобы получить доступ к элементам.

<tr> 
      <td data-bind="text: $parent.area"></td> 
      <td class=""><a data-bind="text: name, click: $parent.editProfile"></a></td> 
      <td data-bind="text: $parent.link"></td> 
      <td> 
       <input data-bind="text: $parent.link"></> </td> 
      <td data-bind="text: $parent.desc"></td> 
      <td data-bind="text: $parent.why"></td> 
      <td> 
       <button class="btn btn-mini btn-danger" data-bind="click: $parent.removeProfile">remove</button></td> 
     </tr> 

Answer 2

я должен был иметь элемент ввода привязки данных в качестве данных связывания = «VALUE: .... если данных привязывать =» текст: он не обновит значение наблюдаемой. Надеюсь, это поможет кому-то другому, столкнувшись с тем же вопросом.

<td data-bind="text: $parent.link"></td> 
    <td><input data-bind="value: $parent.link"></> </td>