knockout.js语法问题(数据绑定和模态)

时间:2017-06-15 00:33:09

标签: javascript jquery twitter-bootstrap knockout.js

enter image description here

附加图像的右侧显示我正在使用的viewModel。 我想要做的是根据链接所具有的“applicationKey”在模态上显示“candidateLocation”。

我从另一篇文章收到的一条建议如下:

该人说他/她会在viewModel上使用一个observable来跟踪当前的应用程序,即将在模态上显示的应用程序。它的名字可以是“currentApplication”。

function application ( applicationKey, location)
{
    this.applicationKey = ko.observable(applicationKey);
    this.candidateLocation = ko.observable(location);
};


function ApplicationsVM(){

    var self = this;

    this.currentApplication = ko.observable("");

    this.setCurrentApplication = function(model){
        self.currentApplication(model);
    };


    this.applicationList = ko.observableArray([
        new application( 'key1', 'location1'),
        new application( 'key2', 'location3'),
        new application( 'key3', 'location4'),
        new application( 'key4', 'location5'),
        new application( 'key5', 'location6'),
        new application( 'key6', 'location7')
    ]);
};

var vm = new ApplicationsVM();
ko.applyBindings(vm);

我不太明白这段代码是如何工作的,因为我是knockout.js的新手。函数application()做什么以及ApplicationsVM()做什么?我将非常感谢对此代码的逐步解释。

之后,该人告诉我如何创建模型的链接:

<ul data-bind="foreach : applicationList">
    <li> <a href="#" data-bind="click : $root.setCurrentApplication" data-toggle="modal" data-target="#previewApplicantModal"> <span data-bind="text: applicationKey" ></span> </a> </li>
</ul>

为模态本身剪了一遍:

<div class="col-md-6" data-bind="with: currentApplication">
    <span data-bind="text: candidateLocation"></span>    
</div>

我知道模态代码试图显示currentApplication的candidateLocation,但我不确定它是如何与applicationKey匹配的。

我想直接问这个人,但他/她没有回应,所以我决定公开发布。

总的来说,我想知道提供的代码是如何工作的,以及它是否真的按预期工作。

0 个答案:

没有答案