代码之家  ›  专栏  ›  技术社区  ›  Stfvns

如何使用knockoutjs将参数foreach从html传递到控制器

  •  1
  • Stfvns  · 技术社区  · 6 年前

    我想从cshtml解析foreach参数。使用foreach from knockout.js <div data-bind="foreach: viewPjsp(1)"> .

    Javascipt:

    function ColumnInput(Id, NameColumn) {
      var self;
      self = this;
      self.Id = ko.observable(Id || null);
      self.NameColumn = ko.observable(NameColumn || null);
    }
    
    (function () {
    'use strict';
    function ElicensingPjspViewModel() {
        var self = this;
    
        self.viewPjsp = ko.observableArray([]);
    
        self.getViewPjsp = function (data, event) {
            var url;
    
            $.ajax({
                type: "GET",
                url: $.rootDir + 'PJSP/PjspEvaluationDetail?AspectId=1', --> here parameter I want to parsing
                success: function (data) {
                    var result;
                    console.log(data);
    
                    result = ko.utils.arrayMap(data.permission, function (item) {
                        return new KolomInput(item.Id, item.NameColumn);
                    });
    
                    self.viewPjsp(result);
                },
                error: function (xhr) {
                    alert(xhr.responseText);
                }
            });
        };
        self.getViewPjsp();
    }
    
    ko.applyBindings(new ElicensingPjspViewModel(), document.getElementById('pjsp_prinsipal'));
    }());
    

    这个 Javascript 尚未使用参数。如何调用viewpjsp(1),然后使用参数发送到ajax中的url ?AspectId=xxxx . 如何将参数knockout从html传递到javascript

    1 回复  |  直到 6 年前
        1
  •  1
  •   Nathan Fisher    6 年前

    当数组与 foreach knockout绑定,它使用当前迭代对象作为包含在绑定的每个html元素中的html标记的数据上下文。所以你可以做如下的片段。我添加了额外的功能,允许单击表行以显示人员的id。我将留给您修改示例以满足您的需要。

    function getData(data){
      alert("The Id of the person is " + data.id);
    }
    
    ko.applyBindings({
            people: [
                { firstName: 'Bert', lastName: 'Bertington', id: 1 },
                { firstName: 'Charles', lastName: 'Charlesforth', id: 2 },
                { firstName: 'Denise', lastName: 'Dentiste', id: 3 }
            ]
        });
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
    
    <!-- example from here - https://knockoutjs.com/documentation/foreach-binding.html -->
    <table class="table">
        <thead>
            <tr><th>First name</th><th>Last name</th></tr>
        </thead>
        <tbody data-bind="foreach: people">
            <tr data-bind="click: getData">
                <td data-bind="text: firstName"></td>
                <td data-bind="text: lastName"></td>
            </tr>
        </tbody>
    </table>

    为了得到更好的解释,请查看本示例所来自的knockout文档。 Knockout "foreach" Binding