Question

单击？

时，如何从html表中的Button获取ViewsModel中的数据绑定值？

请帮帮我？

查看：

<table border="1">
    <thead>
        <tr>
            <th>
                Id
            </th>
            <th>
                Naziv
            </th>
        </tr>
    </thead>
    <tbody data-bind="foreach: customers">
        <tr>
            <td data-bind="text: Id_dobavljaca">

            </td>
            <td data-bind="text: NazivDobavljaca">

            </td>
             <td>
                <button data-bind="click: edit, value: Id_dobavljaca">
                    Edit</button>
                <button >
                    Test</button>
            </td>
        </tr>
    </tbody>
</table>

视图模型：

define(function (require) {

    var app = require('durandal/app'), system = require('durandal/system'),
     ko = require('knockout');

    return {

        customers: ko.observableArray([]),

        activate: prikazi

    }




});



function prikazi() {

    var system = require('durandal/system');

    var that = this;
    system.log('krenu po podatke');


    $.ajax({
        type: 'GET',
        url: '/Durandal/VratiDobavljace',

        dataType: "json",
        success: function (data) {
            that.customers(data);
        },
        error: function (jq, st, error) {
            alert(error);
        }



    });

    system.log('doneo podatke');


    edit = function edit1(Id_dobavljaca) {

        var system = require('durandal/system');

        alert(Id_dobavljaca);


        var router = require('plugins/router');
        router.navigate('treci/' + 123456);

    };




    return that.customers
}

我想在html表中单击按钮时在ViewsModels中传递值（Id_dobavljaca）..

非常感谢！

马丁

Answer 1

在 DurandalJS 中，从作为视图模型的 requirejs 模块返回的对象是绑定到视图的对象。当 DurandalJS 组成您的视图和视图模型时，将调用 activate 函数，您可以阅读更多here。

在您当前的实施中，observableArray 客户是您的视图模型上的属性，可以绑定到您的视图，这很棒，我认为可以正常工作。

但是，通过查看当前的实现，您没有在视图模型上公开edit函数，这意味着它无法绑定到UI并使用。

我重构了你的视图模型：

define(function(require) {

    var app = require('durandal/app'),
        system = require('durandal/system'),
        router = require('plugins/router'),
        ko = require('knockout');

    var customers = ko.observableArray([]);

    return {
        customers: customers,
        edit: function(context) {
            alert(context.Id_dobavljaca);
            router.navigate('treci/' + context.Id_dobavljaca);

        },

        activate: function() {
            system.log('krenu po podatke');

            return $.ajax({
                    type: 'GET',
                    url: '/Durandal/VratiDobavljace',
                    dataType: "json"
                })
                .done(function(data) { customers(data); })
                .fail(function(jq, st, error) { alert(error); })
                .always(function() { system.log('doneo podatke'); });
        }

    }

});

此重构会公开customers observableArray 属性和edit函数。 activate函数还会加载您的数据并将promise返回给 DurandalJS 组合生命周期。

现在，您将注意到编辑函数采用名为context的参数，这是 knockoutjs 事物。当函数绑定到click绑定时，传递给函数的第一个参数是绑定上下文，您可以阅读更多here。

使用此重构的视图模型，您需要在标记中将编辑按钮绑定到edit上下文中的$root函数，这是您的视图模型。< / p>

<td>
   <button data-bind="click: $root.edit">Edit</button>
   <button>Test</button>
</td>

希望下面的代码段可以证明这一解释。

＆＃13;

var example1 = {
  customers: ko.observableArray([{
    Id_dobavljaca: 123,
    NazivDobavljaca: 'Martin',
    edit: function(context) {
      alert('Id_dobavljaca: ' + this.Id_dobavljaca);
      alert('Id_dobavljaca: ' + context.Id_dobavljaca);
    }
  }, {
    Id_dobavljaca: 321,
    NazivDobavljaca: 'Anish',
    edit: function(context) {
      alert('Id_dobavljaca: ' + this.Id_dobavljaca);
      alert('Id_dobavljaca: ' + context.Id_dobavljaca);
    }
  }, ])

}

ko.applyBindings(example1, $('#example1')[0]);

var example2 = {
  customers: ko.observableArray([{
    Id_dobavljaca: 123,
    NazivDobavljaca: 'Martin'
  }, {
    Id_dobavljaca: 321,
    NazivDobavljaca: 'Anish'
  }, ]),
  edit: function(context) {
    alert('Id_dobavljaca: ' + context.Id_dobavljaca);
  }
}

ko.applyBindings(example2, $('#example2')[0]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<p>Edit function is a property on each customer object<p>
<table id="example1" border="1">
  <thead>
    <tr>
      <th>
        Id
      </th>
      <th>
        Naziv
      </th>
    </tr>
  </thead>
  <tbody data-bind="foreach: customers">
    <tr>
      <td data-bind="text: Id_dobavljaca">

      </td>
      <td data-bind="text: NazivDobavljaca">

      </td>
      <td>
        <button data-bind="click: edit">
          Edit</button>
        <button>
          Test</button>
      </td>
    </tr>
  </tbody>
</table>

<br>
<br>
<br>
<p>Edit function is a property on the view model<p>
<table id="example2" border="1">
  <thead>
    <tr>
      <th>
        Id
      </th>
      <th>
        Naziv
      </th>
    </tr>
  </thead>
  <tbody data-bind="foreach: customers">
    <tr>
      <td data-bind="text: Id_dobavljaca">

      </td>
      <td data-bind="text: NazivDobavljaca">

      </td>
      <td>
        <button data-bind="click: $root.edit">
          Edit</button>
        <button>
          Test</button>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

我希望这会有所帮助。

获取html表中按钮的数据绑定值

1 个答案: