Javascript 使用敲除器加载参考号为的模态

一个加载发票模型的js文件，我想显示某个参考号的invoiceviewmodel中的所有信息。这是knockoutjs发票文件代码

        self.selectedinvoice = ko.observable();



/* Vew model for username data */
    function selectedInvoiceViewModel(root /* root not needed */, invoice) {


        var self = this;
        self.ID = invoice.ID;
        self.currency = invoice.currency;
         alert("here i am in selected invoice view model");
    };

    /* Gets the details for a single reference  */
    self.getSelectedInvoice = function (selectedinvoice) {



        self.selectedinvoice(selectedinvoice); 

        self.showMOdalRf();
    };      

因此，现在我正在尝试将SelectedVoiceViewModel中的所有数据加载到我的视图文件中，该文件看起来与此类似

<div data-bind="bootstrapShowModal: modalRfDetails" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button class="close" aria-hidden="true" type="button" data-bind="click: hideModalRf">×</button>
            <!-- bindauksen voi tehdä joko pelkästään ID tai pidemmän kaavan mukaan $data.ID -->
            <h4 >Details for Invoice  </h4>
        </div>
        <div class="modal-body">
            <div class="table-responsive">
            <table class="table table-striped table-bordered table-condensed">
               <thead>
            <tr>

                <th class="text-center">invoice description</th>
            </tr>
        </thead>
        <tbody data-bind="with: selectedinvoice">
            <tr>
                <td>ID</td>
                <td><span data-bind="text:ID"></span></td>
            </tr>
            <tr>
                <td>Currency</td>
                <td><span data-bind="text: currency"></span></td>
            </tr>

×
发票明细
发票说明
身份证件
通货

所以基本上我的想法是，当有人点击表中的参考号时，以这种方式给出

<td class="text-right"><a href="#" data-bind="click: $root.getSelectedInvoice"><span data-bind="text: $data.rf_reference"></span></a></td>

该模型应弹出打开，并从InvoiceViewModel获取仅用于该参考号的所有数据

---

例如，单击模式打开所有详细信息，如

控制小部件打开或关闭的最佳且更惯用的方法是创建自定义绑定

这是R p Niemeyer制作的dialgo绑定：

此解决方案使用jQuery模型。也许你必须适应它。解决方案将非常相似

---

这样做比直接使用jQuery要好得多。这是一个坏主意，因为您混淆了两种与DOM元素交互的非常不同的方式：直接操纵和MVVM绑定。

我从您使用的绑定处理程序的名称猜出来。不幸的是，它至少有一个打字错误。但这至少是一个好的开始

当你遇到一个特殊的问题，比如模态无法为你打开时，写一个简单的示例程序。不要包含任何与您的问题无关的内容。在这种情况下，您应该拥有的只是一个模态和一些控制它的东西。这不仅仅是为了我们的利益，这也是你解决自己问题的方法。清除所有其他可能以不可预测的方式与您的问题交互的代码

下面是一些使用绑定处理程序的示例代码（已更正）。我所做的只是获取一个引导模式的示例HTML，将其连接到绑定处理程序，并制作一个按钮来切换模式控制变量

ko.bindingHandlers.bootstrapshowmodel={
init：函数（元素、值访问器）{
var value=valueAccessor（）；
$（元素）.on（'hidden'，function（））{
值（假）；
});
$（元素）.on（'显示'，函数（））{
值（真）；
});
},
更新：函数（元素、值访问器）{
var value=ko.utils.unwrapobbservable（valueAccessor（））；
调试（“新值：”，值）；
如果（值）{
控制台调试（“打开”）；
$（元素）.modal（'show'）；
//这是为了集中对话框内的输入字段
$（“输入”，元素）.focus（）；
}否则{
调试（“隐藏”）；
$（元素）.modal（'hide'）；
}
}
};
vm={
等参线：可观测（假），
toggleOpen:function（）{
控制台调试（“切换”）；
vm.isOpen（！vm.isOpen（））；
}
};
ko.应用绑定（vm）

&时代；
模态头
模态中的一些文本

关
切换
根据上述答案进行的一些更正。在上面的代码中，toogle按钮需要点击两次才能打开，因为它不会在关闭模式时更新isopen observable


ko.bindingHandlers.bootstrapshowmodel={
init：函数（元素、值访问器）{
var value=valueAccessor（）；
$（元素）.on（'hidden'，function（））{
值（假）；
});
$（元素）.on（'显示'，函数（））{
值（真）；
});
},
更新：函数（元素、值访问器）{
var value=ko.utils.unwrapobbservable（valueAccessor（））；
log（“新值：”，值）；
如果（值）{
控制台日志（“打开”）；
$（元素）.modal（'show'）；
//这是为了集中对话框内的输入字段
$（“输入”，元素）.focus（）；
}否则{
控制台日志（“隐藏”）；
$（元素）.modal（'hide'）；
}
}
};
vm={
等参线：可观测（假），
toggleOpen:function（）{
log（“切换”+vm.isOpen（））；
vm.isOpen（！vm.isOpen（））；
log（“Toggling1”+vm.isOpen（））；
},
closemodal:function（）{
vm.isOpen（假）；
log（“Toggling2”+vm.isOpen（））；
}
};
ko.应用绑定（vm）

&时代；
模态头
模态中的一些文本

关
切换
我没有得到太多，但是如果您想加载特定参考的数据，请尝试在单击时将其作为加载数据的参数传递。
单击：$root.showModalRf（$data，rf\u reference）
。基本上，如果我单击参考号，模型应该包含来自参考号的所有信息，我在末尾添加了两张图片，这样你就可以明白我的意思了，模态现在没有显示任何内容，我也尝试了你的参数，但不起作用@很遗憾，我看不到这些（访问问题），但上述方法仍然是可行的。你好像说你试过了？单击时，您将参考号传递给viewModel中的单击功能，在那里您需要查询以获取特定参考号的数据，并将其填入
selectedinvoice
。仍然不起作用-可能是视图绑定有问题#建议在车身上使用
with:selectedinvoice
，只需使用
text:ID
避免使用
selectedinvoice（）.ID
等多余的内容您应该从学习基本知识开始：在模型中使用可观察属性，使用
with
绑定，使用绑定来显示模态（通过将相应的类添加到模态元素中）。请制作教程。这样您就可以更清楚地了解您所拥有的