点击下一个json对象使用knockout无法正常工作

时间:2015-01-23 16:03:33

标签: jquery json knockout.js

我是淘汰赛的新手,无法弄清楚为什么这不起作用。我在json对象中设置了一个假数据,这个数据加载正常。

我想要做的就是当我点击时,我会转到我阵列中的下一组json。

有人可以帮忙吗?我已将我的代码添加到jsfiddle:

var prmIDM = [
    {"fname" : "Lachelle", "lname" : "Speights", "accountNum" : "0313598134154", "dob" : "8/23/1953", "ssn" : "482949589", "mrn" : "031359813"},
    {"fname" : "John", "lname" : "Borowski", "accountNum" : "0212714814227", "dob" : "5/20/1928", "ssn" : "277333788", "mrn" : "021271481"},
    {"fname" : "John", "lname" : "Stretch", "accountNum" : "0418881244205", "dob" : "7/5/1947", "ssn" : "408567299", "mrn" : "096957033"},
    {"fname" : "Jim", "lname" : "Statler", "accountNum" : "0969570334205", "dob" : "4/9/1940", "ssn" : "784756948", "mrn" : "096957033"},
    {"fname" : "Shantel", "lname" : "Jones", "accountNum" : "0214376944234", "dob" : "9/25/1937", "ssn" : "745821530", "mrn" : "021437694"},
    {"fname" : "Julie", "lname" : "Michaels", "accountNum" : "0903209044201", "dob" : "6/2/1931", "ssn" : "571071578", "mrn" : "09032090"},
    {"fname" : "Jacob", "lname" : "Bryant", "accountNum" : "0110505494161", "dob" : "6/19/1925", "ssn" : "190628353", "mrn" : "011050549"},
    {"fname" : "Patrice", "lname" : "Akey", "accountNum" : "0932227764227", "dob" : "10/6/1938", "ssn" : "505625569", "mrn" : "093222776"},
    {"fname" : "Luis", "lname" : "Alvarez", "accountNum" : "0910857384230", "dob" : "3/19/1925", "ssn" : "160334565", "mrn" : "091085738"},
    {"fname" : "Jean", "lname" : "Moutsos", "accountNum" : "0713766104234", "dob" : "6/12/1945", "ssn" : "743209531", "mrn" : "071376610"},
    {"fname" : "Lara", "lname" : "McCentee", "accountNum" : "0617627384203", "dob" : "6/2/1929", "ssn" : "439264586", "mrn" : "061762738"},
    {"fname" : "Ema", "lname" : "Patnaude", "accountNum" : "0432709234172", "dob" : "1/17/1932", "ssn" : "709467535", "mrn" : "043270923"},
    {"fname" : "Caprice", "lname" : "Pough", "accountNum" : "0617627384203", "dob" : "6/2/1929", "ssn" : "268033758", "mrn" : "061762738"},
    {"fname" : "Verna", "lname" : "Houlihan", "accountNum" : "0432709234172", "dob" : "1/17/1932", "ssn" : "551434463", "mrn" : "043270923"},
    {"fname" : "Laurene", "lname" : "Garside", "accountNum" : "0617627384203", "dob" : "6/2/1929", "ssn" : "211106176", "mrn" : "061762738"},
    {"fname" : "Melani", "lname" : "Klumpp", "accountNum" : "0432709234172", "dob" : "1/17/1932", "ssn" : "681748901", "mrn" : "043270923"},
    {"fname" : "Wyatt", "lname" : "Sisneros", "accountNum" : "0617627384203", "dob" : "6/2/1929", "ssn" : "629772910", "mrn" : "061762738"},
    {"fname" : "Clemmie", "lname" : "Currence", "accountNum" : "0202186734226", "dob" : "9/9/1942", "ssn" : "808127893", "mrn" : "020218673"},
    {"fname" : "Lyndon", "lname" : "Wymore", "accountNum" : "0381236024227", "dob" : "7/13/1940", "ssn" : "965647799", "mrn" : "038123602"},
    {"fname" : "Ellena", "lname" : "Lasley", "accountNum" : "0911287694230", "dob" : "12/25/1924", "ssn" : "314003436", "mrn" : "091128769"},
    {"fname" : "Anita", "lname" : "Wongus", "accountNum" : "0712566554227", "dob" : "5/3/1935", "ssn" : "906483867", "mrn" : "071256655"},
    {"fname" : "Ingacia", "lname" : "Edds", "accountNum" : "0320587284226", "dob" : "7/17/1959", "ssn" : "176153844", "mrn" : "032058728"},
    {"fname" : "Neisha", "lname" : "Clukey", "accountNum" : "0211411634230", "dob" : "9/1/1936", "ssn" : "995300985", "mrn" : "021141163"},
    {"fname" : "Muriel", "lname" : "DiFranco", "accountNum" : "0434137674232", "dob" : "8/9/1920", "ssn" : "171369566", "mrn" : "043413767"},
    {"fname" : "Delani", "lname" : "Scherer", "accountNum" : "0211411634230", "dob" : "9/1/1936", "ssn" : "469389743", "mrn" : "021141163"},
    {"fname" : "Emelia", "lname" : "Hendrix", "accountNum" : "0434137674232", "dob" : "8/9/1920", "ssn" : "948310790", "mrn" : "043413767"},
    {"fname" : "Rachelle", "lname" : "Heims", "accountNum" : "0211411634230", "dob" : "9/1/1936", "ssn" : "103070868", "mrn" : "021141163"},
    {"fname" : "Nerissa", "lname" : "Cooks", "accountNum" : "0434137674232", "dob" : "8/9/1920", "ssn" : "364083439", "mrn" : "043413767"},
    {"fname" : "Lavonda", "lname" : "Jackson", "accountNum" : "0434597594230", "dob" : "2/26/1933", "ssn" : "765860603", "mrn" : "043459759"},
    {"fname" : "Tommy", "lname" : "Mirando", "accountNum" : "0285281674234", "dob" : "5/22/1938", "ssn" : "549498787", "mrn" : "028528167"},
    {"fname" : "Fritz", "lname" : "Lorance", "accountNum" : "0434595114230", "dob" : "5/3/1943", "ssn" : "939290262", "mrn" : "043459511"},
    {"fname" : "Rufus", "lname" : "Wire", "accountNum" : "0285281674234", "dob" : "5/22/1938", "ssn" : "713099799", "mrn" : "028528167"},
    {"fname" : "Carolina", "lname" : "Collazo", "accountNum" : "0271091604209", "dob" : "7/15/1928", "ssn" : "536992186", "mrn" : "027109160"},
    {"fname" : "Angela", "lname" : "Hailey", "accountNum" : "0702954234234", "dob" : "3/30/1933", "ssn" : "567854765", "mrn" : "070295423"},
    {"fname" : "Cedrick", "lname" : "Haglund", "accountNum" : "0131152174213", "dob" : "4/10/1933", "ssn" : "300569626", "mrn" : "013115217"},
    {"fname" : "Weston", "lname" : "Zeller", "accountNum" : "0261923904157", "dob" : "5/31/1934", "ssn" : "430584375", "mrn" : "026192390"},
    {"fname" : "Rochelle", "lname" : "Stulman", "accountNum" : "0610366794234", "dob" : "6/19/1940", "ssn" : "935276561", "mrn" : "061036679"},
    {"fname" : "Jenise", "lname" : "Hessler", "accountNum" : "0257387134153", "dob" : "6/12/1925", "ssn" : "349258745", "mrn" : "025738713"},
    {"fname" : "Francis", "lname" : "Leclaire", "accountNum" : "0612484234227", "dob" : "8/6/1925", "ssn" : "259944913", "mrn" : "061248423"},
    {"fname" : "Jimbo", "lname" : "Jones", "accountNum" : "0411592294230", "dob" : "6/19/1927", "ssn" : "861724741", "mrn" : "041159229"},
    {"fname" : "Hunter", "lname" : "Thompson", "accountNum" : "0258475394184", "dob" : "6/26/1946", "ssn" : "91889799", "mrn" : "025847539"},
    {"fname" : "Clark", "lname" : "Dubas", "accountNum" : "0937344914239", "dob" : "9/17/1945", "ssn" : "317518087", "mrn" : "093734491"},
    {"fname" : "Homer", "lname" : "Simpson", "accountNum" : "0358153844246", "dob" : "7/21/1943", "ssn" : "792349443", "mrn" : "035815384"},
    {"fname" : "Peter", "lname" : "Griffin", "accountNum" : "0233833494237", "dob" : "7/12/1935", "ssn" : "574720187", "mrn" : "023383349"},
    {"fname" : "Logan", "lname" : "Wolfe", "accountNum" : "0011464894242", "dob" : "7/12/1932", "ssn" : "842509431", "mrn" : "001146489"},
    {"fname" : "Johnny", "lname" : "Route", "accountNum" : "0271091604196", "dob" : "7/15/1928", "ssn" : "140429089", "mrn" : "027109160"},
    {"fname" : "Bill", "lname" : "Bixby", "accountNum" : "0711033864233", "dob" : "5/12/1934", "ssn" : "250827182", "mrn" : "071103386"},
    {"fname" : "Scott", "lname" : "Herron", "accountNum" : "0384223754191", "dob" : "11/13/1933", "ssn" : "345651216", "mrn" : "038422375"},
    {"fname" : "Dontrell", "lname" : "Wilson", "accountNum" : "0230852594219", "dob" : "1/31/1948", "ssn" : "987850883", "mrn" : "023085259"},
    {"fname" : "Jorge", "lname" : "Bell", "accountNum" : "0411546674216", "dob" : "7/13/1949", "ssn" : "673450241", "mrn" : "041154667"}
];

var prmKO = function () {
var self = this;
self.fname = ko.observable();
self.lname = ko.observable();
self.accountNum = ko.observable();
self.dob = ko.observable();
self.ssn = ko.observable();
self.mrn = ko.observable();
}

var prmMapper = function (dto, item) {
item.fname(dto.fname)
.lname(dto.lname)
.accountNum(dto.accountNum)
.dob(dto.dob)
.ssn(dto.ssn)
.mrn(dto.mrn)
return item;
}


$(function () {
var observedPRM = prmMapper(prmIDM[0],new prmKO());
ko.applyBindings(observedPRM);
});

http://jsfiddle.net/mujaji/92wbdq2y/

我尝试了一些事情,但都没有工作。

有人可以帮我搞清楚吗?我希望这很简单。

感谢

2 个答案:

答案 0 :(得分:0)

没有绑定到“下一步”链接。您需要绑定一个事件:<button data-bind="click: someFunctionNameHere">Next</button>。请参阅the documentation

答案 1 :(得分:0)

我弄明白为什么它不起作用。

需要更换:

****使用Javascript:****

$(function () {
    var observedPRM = prmMapper(prmIDM[0],new prmKO());
    ko.applyBindings(observedPRM);
});

$('.nextAcct').click(function() {
    prmIDM++;
});

**** **** HTML

<div class="panel" id="hostMain">
<a href="#" class="btn btn-primary">Next <i class="fa fa-chevron-right"></i> </a>

使用此:

****使用Javascript:****

function RootVM() {
    var self = this;
    var i = 0;
    self.patient = ko.observable(prmMapper(prmIDM[0], new prmKO()));
    self.moveNext = function () {
        var self = this;
        self.patient(prmMapper(prmIDM[++i], new prmKO()));
    };
}
ko.applyBindings(new RootVM());

**** HTML:****

<div class="panel" id="hostMain" data-bind="with: patient">
<a href="#" class="btn btn-primary" data-bind="click: $root.moveNext">Next <i class="fa fa-chevron-right"></i> </a>

http://jsfiddle.net/mujaji/92wbdq2y/2/