javascript - 获取html表格中按钮的数据绑定(bind)值

Question

单击时如何从 html 表中的 Button 获取 ViewsModel 中的数据绑定(bind)值？

请帮帮我？

浏览次数:

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

View 模型:

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 模块(即 View 模型)返回的对象是绑定(bind)到 View 的对象。当 DurandalJS 组合你的 View 和 View 模型时，activate 函数将会被调用，你可以阅读更多 here .

在您当前的实现中，observableArray customers 是 View 模型上的一个属性，可以绑定(bind)到您的 View ，这很棒，我认为可以工作。

但是，从您当前的实现来看，您尚未在 View 模型上公开 edit 函数，这意味着它无法绑定(bind)到 UI 并使用。

我重构了你的 View 模型:

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 的东西。当函数绑定(bind)到 click 绑定(bind)时，传递给函数的第一个参数是绑定(bind)上下文，您可以阅读更多内容 here .

使用此重构 View 模型，您希望在标记中将 edit 按钮绑定(bind)到 $root 上下文中的 edit 函数，这是您的 View 模型。

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

希望下面的代码片段能够演示这一解释。

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>

我希望这会有所帮助。