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());

这是我的VIEW代码

<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'未定义;

有人可以指点我在这里做错了什么。

Answer 1

要使代码正常工作，您可以将if condition添加到HTML中。专家可能会指出Rekha的确切错误:)。

<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时，你会看到如下内容： - enter image description here

因此您需要$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

我必须将输入数据元素绑定为data-bind =“VALUE：.... 如果data-bind =“text：它不会更新observable的值。希望这会帮助遇到同样问题的其他人。

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

使用knockout在可观察数组中编码可观察对象的正确方法

2 个答案: