Question

我开始使用KnockoutJS，当然还有疑惑。所以我有这个jQuery代码：

$.post("someUrl", $form.serialize(), 'json').done(function (data, textStatus, jqXHR) {
    $.cookie("stepOneSave", true);

    // here I should update the attributes from response in data
}).fail(function () {
    return false;
}).always();

然后在我看来（它是一个Twig模板，因为这是Symfony2项目的一部分）我有这个：

<fieldset class="rpni-border">
    <legend class="rpni-border">Datos de Solicitud</legend>
    <div class="spacer10"></div>
    <div class="col-md-3">
        <p><strong>Number:</strong></p>
        <p><strong data-bind="text: currIDSolicitud"></strong></p>
    </div>
    <div class="col-md-3">
        <p>Request Type: </p>
        <p><strong data-bind="text: currTipoSolicitud"></strong></p>
    </div>
    <div class="col-md-3">
        <p>Office: </p>
        <p><strong data-bind="text: currOficinaRegional"></strong></p>
    </div>
    <div class="col-md-3">
        <p>Status: </p>
        <p><strong data-bind="text: currEstadoSolicitud"></strong></p>
    </div>
</fieldset>

使用提供的信息如何更新属性并将它们绑定到视图？这是我第一次使用Knockout，我开始阅读here，但我不清楚这一点，有什么能给我一些帮助吗？

Answer 1

好的，假设您使用ajax请求从服务器返回此数据

data: [
  {
     id: 1,
     name: 'John',
     age: 17
  },
  {
     id: 2,
     name: 'Doe',
     age: 20
  }
];

在viewmodel函数中，您需要将一个属性定义为observableArray来处理上述数据：

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

   self.friends = ko.observableArray([]);
};

现在从上面的代码中你已经有空friends observableArray，接下来你需要编写你的ajax请求来从服务器获取数据然后将它插入observableArray：

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

   self.friends = ko.observableArray([]);
};

$(document).ready(function()
{
   var viewmodel = new ViewModel();

   ko.applyBindings(new viewmodel());

   $.ajax({
      url: '/example',

      // more ajax options...

      success: function(response)
      {
         viewmodel.friends(response.data);
      }
   });
});

这里的视图看起来很像：

<div data-bind="foreach: $root.friends">
    <div class="row">
       <div class="col-md-6" data-bind="text: name"></div>
       <div class="col-md-6" data-bind="text: age"></div>
    </div>
</div>

因此，如果您想添加class属性，请执行以下操作：

<div data-bind="foreach: $root.friends">
    <div class="row" data-bind="css: age < 18 ? 'kid' : 'adult'">
       <div class="col-md-6" data-bind="text: name"></div>
       <div class="col-md-6" data-bind="text: age"></div>
    </div>
</div>

或者您可能想要添加href属性，请执行以下操作：

<div data-bind="foreach: $root.friends">
    <div class="row" data-bind="css: age < 18 ? 'kid' : 'adult'">
       <div class="col-md-12" data-bind="text: name"></div>
       <a data-bind="text: age, attr: { href: age < 18 ? 'http://kid.com' : 'http://adult.com' }"></a>
    </div>
</div>

详细了解attr binding here

p / s：这不是一个好方法，但应该有效！

在$ .post方法调用的.done（）回调中更新视图模型是可能的吗？

1 个答案: