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

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 模块返回的对象是绑定到视图的对象。 activate 函数会在 DurandalJS 组成你的视图和视图模型时被调用，你可以阅读更多here。

在您当前的实现中，observableArraycustomers 是您的视图模型上的一个属性，可以绑定到您的视图，这很好，我认为它可以工作。

但是，从您当前的实现来看，您并没有在视图模型上公开 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 上下文中的 edit 函数，这是您的视图模型。

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

希望下面的 sn-p 可以证明这个解释。

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

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

我希望这会有所帮助。