数据绑定jquery移动多选与淘汰赛

时间:2012-01-08 20:09:21

标签: jquery dynamic mobile loading

更新 我弄清楚为什么它不会将数据加载到select ... my

 function company(name, value) {
        this.name = ko.observable(name);
        this.value = ko.observable(value);
    }

应该是

function company(name, value) {
   this.comapnyName = name;
   this.companyValue = value;
}

所以它会匹配数据绑定中的预期结构...但是它仍然没有在开始时加载,但只有在我选择了某些内容之后才会从之前的三个更改为由JSON调用加载的那三个... 任何原因刷新都没有解雇?

更新

我正在尝试将一些项目动态加载到多选jquery移动样式选择中,但是使用knockout.js作为后端...这是我的代码......当我在代码中加载viewModel时它正在工作(显示test,test1,test2 items)但是我想加载不在服务器端的项目,但是在客户端,使用$ .getJSON调用来加载:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="js/knockout-2.0.0.debug.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
</head>
<body>
Choose a company: <select id="companies" data-role="select" data-bind="options: companies,
    optionsCaption: 'Choose...',
    optionsText: 'companyName',
    optionsValue: 'companyValue',
    selectedOptions: chosencompanies" data-native-menu="false" multiple></select> 
<input data-bind="value: chosencompanies"></input>    
<script type="text/javascript">
$(document).ready(function () {
    function company(name, value) {
        this.name = ko.observable(name);
        this.value = ko.observable(value);
    }
    var viewModel = {
        companies: ko.observableArray([
                { companyName: "test", companyValue: 0 },
                { companyName: "test1", companyValue: 1 },
                { companyName: "test2", companyValue: 2 }
            ]),
        chosencompanies: ko.observableArray(["0", "1", "2"]),
        resetcompanies: function () { this.chosencompanies(null) }
    };
    $.getJSON("http://localhost/service.svc/json/gc", function (json) {
        //var dataFromServer = ko.utils.parseJson(json);
        var mappedData = ko.utils.arrayMap(json.GetCompaniesRESTResult, function (item){
            return new company(item.LongName, item.ID);
        });
        viewModel.companies(mappedData);
    });
    ko.applyBindings(viewModel);
    $("#companies").selectmenu('refresh', 'true');
});
</script>
</body>
</html>

但是,即使从我的getJSON调用中正确加载mappedData var(BTW返回以下JSON:

{"GetCompaniesRESTResult":
[{"ID":1,"IsOnline":false,"LongName":"test1","ShortName":"t1"},
{"ID":2,"IsOnline":false,"LongName":"test2","ShortName":"t2"},
{"ID":3,"IsOnline":false,"LongName":"test3","ShortName":"t3"}]}

它没有显示在已加载的页面上...单击选择按钮,我尝试选择一些我将看到所选公司输入将包含3个逗号字符的内容(但之间没有任何内容,因为它之前持有[“0 “,”1“,”2“],这是我尝试预选选择中加载的所有项目 - 我还没有设法做到 - 所以如果有人知道请回答这里或How to pre-select an option in a dropdown knockout js)。

我为公司observableArray分配值是错误的吗?或者以某种方式错误地形成了分配的值(即使它传递了一个数组),并在开发人员safari工具中显示为Array [3]。或者也许刷新电话不是很好?

请帮助,任何帮助将不胜感激,我现在​​大部分时间开始淘汰赛和jqm ......

0 个答案:

没有答案