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

Posted 2023-05-08

【中文标题】如何使用 knockoutJs 将参数 foreach 从 html 传递到控制器

【英文标题】：How to pass parameter foreach from html to controller using knockoutJs

【发布时间】：2019-05-11 00:26:17

【问题描述】：

我想从 CShtml 中解析参数 foreach。使用来自 knockout.js <div data-bind="foreach: viewPjsp(1)"> 的 foreach。

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) 然后使用参数?AspectId=xxxx 发送到 ajax 中的 URL。如何将参数敲除从 html 传递到 javascript

【参考方案1】：

当数组与foreach 敲除绑定一起使用时，它使用当前迭代对象作为包含在绑定foreach html 元素中的html 标记的数据上下文。因此，您可以执行以下 sn-p 之类的操作。我添加了额外的功能，允许单击表格行来显示人员的 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 "foreach" Binding