在淘汰赛 + MVVM 上从动态创建的文本框中检索值

Question

我是这个淘汰赛 js 和 MVVM 架构的新手。无法在按钮单击事件上检索动态创建的文本框值。

代码：HTML

   <div data-bind="foreach: cources">
      <input type="text" data-bind="value: textValue"/>
      <br>          
   </div>

 <input type="button" data-bind="click:retrieve" value="Value"/>

代码：js

function CourseViewModel(){
      textValue = ko.observable(''); 
}

var ViewModel= {
      cources : ko.observableArray([new CourseViewModel()]),
      retrieve: function()
      {
          var abc = $.parseJSON(ko.toJSON({ textValue: ViewModel.cources})); 
          alert(abc.textValue());
      }
}

ko.applyBindings(ViewModel);

Answer 1

可能有几个不同的问题：

• 您需要检查构造函数的工作原理。相关主题的KO docs have some info，Stack Overflow 也是如此。如果您想从调用 ViewModel 的函数内部引用 ViewModel，您可以使用以下模式。
• 您希望abc 有一个名为textValue 的函数，但那是在您往返JSON 之后。 JSON 不会保留这样的函数。
• 您的课程视图模型不会在外部公开textValue。您需要将其导出，例如使用self 成语。请参见下面的示例。
• 您必须将 cources 更改为 cources()：它是一个 observableArray，要检索它的值，您需要执行 observable。

var CourseViewModel = function() {
  var self = this;
  self.textValue = ko.observable('initial value');
};

var ViewModel = function() {
    var self = this;
    self.cources = ko.observableArray([new CourseViewModel()]);
    self.retrieve = function() {
        var abc = ko.toJSON({ textValue: self.cources() }); 
        alert(abc);
    }
};

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach: cources">
  <input type="text" data-bind="value: textValue"/>
</div>
<input type="button" data-bind="click:retrieve" value="Value"/>

如果您坚持远离 ViewModel 的构造函数，您仍然可以这样做，但您必须在使用您希望的所有属性实例化后将ViewModel 修改为retrieve采用。像这样：

var CourseViewModel = function() {
  var self = this;
  self.textValue = ko.observable('initial value');
};

var viewModel = {
    cources: ko.observableArray([new CourseViewModel()])
};

viewModel.retrieve = function() {
    var abc = ko.toJSON({ textValue: viewModel.cources() }); 
    alert(abc);
};

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach: cources">
  <input type="text" data-bind="value: textValue"/>
</div>
<input type="button" data-bind="click:retrieve" value="Value"/>

你真的应该通过the Knockout tutorials。这应该不会花费很长时间，并且会很快为您节省 很多 时间来解决此类问题。

Answer 2

在您的代码中，一切都很好，而不是您与当前对象的绑定。您需要将您的数据和函数与this 类似，

function CourseViewModel() {
    this.textValue = ko.observable('');
}
var ViewModel = function(){
    this.cources= ko.observableArray([new CourseViewModel()]);
    this.retrieve= function () {
        var abc = ko.toJSON({
            textValue: this.cources
        });
        alert(abc);
    }
}
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="foreach: cources">
    <input type="text" data-bind="value: textValue" />
    <br/>
</div>
<input type="button" data-bind="click:retrieve" value="Value" />