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。< / LI>

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

如果您坚持远离ViewModel的构造函数，您仍然可以执行此操作，但在实例化后，您必须使用ViewModel 修改 retrieve包含您想要使用的所有属性。像这样：

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

你应该经历the Knockout tutorials。它不应该花很长时间，并且会很快为你节省很多时间来解决这类问题。

Answer 2

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

＆＃13;

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

＆＃13;

<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" />

＆＃13;

从knockout + MVVM上的动态创建的文本框中检索值

2 个答案: