KnockoutJS MVC部分查看所选信息。

Question

我试图在我的HTML页面上实现一个部分视图，我扩大了屏幕上的QR码的大小，使用户更容易看到，每当他们是点击按钮showQRPanel。

HTMLPAGE:

<div data-bind="using: DetailsArray">
    <table style="padding: 9px; border: 1px solid;" data-bind="foreach: DetailsArray">
        <tr style="border: 1px solid;">
            <th>Patient</th>
            <th>Age</th>
            <th>QR</th>
            <th>img</th>
            <th>Button</th>
        </tr>
        <tr>
            <td data-bind="text: patient"></td>
            <td data-bind="text: age"></td>
            <td data-bind="text: mobnum"></td>
            <!--ko if: mobnum-->
            <td><img style="width: 100px; height: 100px;" data-bind="attr: { 'src': '@Url.Action("QrGenerator", "Home")?mobnum_text=' + mobnum }" /></td>
            <td><button id="showQRPanel" data-bind="click: $root.ShowPanel">...</button></td>
            <!--/ko-->
        </tr>
    </table>

        <!--ko if: ShowPanel-->
        @Html.Partial("~/Views/Home/_QRPanel.cshtml")
        <!--/ko-->

</div>

部分视图。

<div style="background-color: slategrey; width: 53%;" data-bind="with: $root.DetailsArray">

    <h2>Phone Number:</h2>
    <img style="width: 100px; height: 100px;" data-bind="attr: { 'src': '@Url.Action("QrGenerator", "Home")?mobnum_text=' + mobnum }" />

</div>

ViewModel:

var viewModel = {
    ShowPanel: ko.observable(false),

    DetailsArray: ko.observableArray([
        { patient: "niall", age: "13", mobnum: "0793983720"},
        { patient: "jacob", age: "13", mobnum: "07939837332"},
        { patient: "sam", age: "15", mobnum: ""},
    ])
};



ko.applyBindings(viewModel);

谢谢！我正在尝试实现一个局部视图。

Answer 1

首先，我认为你不需要使用 using 在你 div 在顶部。 请查看使用绑定的文档 (https:/knockoutjs.comdocumentationwith-binding.html。).

第二，你的局部视图中的绑定不太正确。 你的 img 正试图与 mobnum但你没有 mobnum 属性。 相反，你在数组中的每一个项目都有一个，但你没有告诉绑定如何知道使用哪一个。

第三，你的按钮上的点击处理程序调用了 ShowPanel 方法。 然而，。ShowPanel 是一个可观察的对象，所以当你调用它时，它所做的只是返回它的值，而点击处理程序会忽略这个值。

移除 using: DetailsArray 在HTML页面的顶部，可以尝试这样做。

Viewmodel:

var viewModel = {
    SelectedMobNum: ko.observable(),

    ShowPanel: function(item) {
        viewModel.SelectedMobNum(this.mobnum);
    },
    ClosePartialView: function() {
      viewModel.SelectedMobNum(null);
    },

    DetailsArray: ko.observableArray([
        { patient: "niall", age: "13", mobnum: "0793983720"},
        { patient: "jacob", age: "13", mobnum: "07939837332"},
        { patient: "sam", age: "15", mobnum: ""},
    ])
};

部分视图（注意到我去掉了 with 约束力）。)

<div data-bind="visible: SelectedMobNum">

    <h2>Phone Number:</h2>
    <img data-bind="attr: { 'src': '@Url.Action("QrGenerator", "Home")?mobnum_text=' + SelectedMobNum() }" />
    <button data-bind="click: ClosePartialView">Close</button>

</div>