Question

我已经在这方面工作了太久......而且由于jsfiddle并不支持Durandal，所以希望有人可以对问题所处的位置有所了解。我倾向于我的数据绑定。

HTML：

<section>
<div class="row row-centered">
  <div class="col-sm-6 col-sm-4 col-sm2 col-centered">
    <div class="panel panel-info">
      <div class="panel-heading">
          Contact
      </div>
      <div class="panel-body">
        <form role="form">
          <div class="form-group">
            <label for="inputName">Name</label>
            <input type="text" class="form-control" id="inputName" data-bind="value: name, valueUpdate: 'afterkeydown'" placeholder="Username">
          </div>
          <div class="form-group">
            <label for="inputEmail">E-mail</label>
            <input type="email" class="form-control" id="inputEmail" data-bind="value: email, valueUpdate: 'afterkeydown'" placeholder="Email">
          </div>
          <div class="form-group">
            <label for="inputText">Message</label>
            <textarea class="form-control" id="inputText" data-bind="value: msg, valueUpdate: 'afterkeydown'" placeholder="Message"></textarea>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-info" data-bind="click:sendEmail, enable: name, enable: email, enable: msg">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- ko if: debugTrue -->
<div class="row row-centered">
  <div class="col-sm-6 col-sm-4 col-sm2 col-centered">
    <div class="panel panel-success">
      <div class="panel-heading">
        Data Return
      </div>
      <div class="panel-body"> 
          <ul data-bind="foreach: debugInfo(), as: 'd'">
              <li data-bind="html: d"></li>
          </ul>
      </div>
    </div>
  </div>
</div>
<!-- /ko -->
</section>

迪朗达尔：

define(function (require) {
  var app = require('durandal/app'),
      http = require('plugins/http'),
      ko = require('knockout');

  var url = '/api/api.php';

  return {
    name: ko.observable(),
    email: ko.observable(),
    msg: ko.observable(),
    debugInfo: ko.observableArray([]),

    sendEmail: function() {
      var qs = {
        method: 'email',
        name: this.name(),
        to: this.email(),
        msg: this.msg(),
      };
      var that = this;

      app.showMessage('Email sent to ' + this.name() + ' at ' + this.email());
      return http.post(url, qs).then(function(response) {
        that.debugInfo(response.items);
      });
    }
  };
});

从api.php返回：

{"images":1,"items":[1,2,3,4],"status":1}

所以问题是，当通过debugInfo（）进行迭代时，它不会填充。

非常感谢。

Answer 1

到目前为止，你遇到了一些问题。

var that = this;在错误的位置。这似乎代表了sendmail函数，因此没有与之关联的debugInfo属性。
你有一个淘汰虚拟元素。 viewmodel上没有相应的debugTrue属性。
使用带有as: d的foreach所需的绑定如下

<ul data-bind="foreach: {data: debugInfo, as: 'd'}"> <li data-bind="html: d"></li> </ul>

这是一个jsFiddle Demo然后希望帮助

使用KnockoutJS + DurandalJS从POST返回数据

1 个答案: