使用Knockout.js绑定表中的下拉列表

时间:2013-12-24 10:10:03

标签: knockout.js

我在绑定表格中的HTML下拉列表时遇到问题。 需要根据状态更改Column1的颜色,并使用来自JSON的实际值设置下拉列表的默认值。

JS小提琴链接同样是:

http://jsfiddle.net/sajesh1985/uguxA/1/

 <div class="divStat" data-bind="style: {background: selectedChoice() === 'Pricing Complete' ? 'Green': 'Red'}">

请检查并告诉我这个问题。

谢谢和问候, Sajesh Nambiar

2 个答案:

答案 0 :(得分:1)

更改样式绑定

<div class="divStat" 
    data-bind="style: {background:selectedChoice().Name === 'Pricing Complete' ? 'Green': 'Red'}">
</div>

并在 ViewModel 中将json映射到模型,我习惯直接分配javascript对象

这是选项模型

 self.pricingstatus = [
        { Name: 'Pricing Complete' },
        { Name: 'Pricing Incomplete' }

];

这是用于将json绑定到模型

  self.BindPricingSiemensProductsDetailsData = function (data) {
    var tempArray = [];

    self.simpleSearchResultsArray([]);
    if (data) {
        for (var k = 0; k < data.length; k = k + 1) {
            var temppricingProdDetails = new PricingSiemensProductDetails();
            temppricingProdDetails.ItemNo(data[k].ItemNo);                
            temppricingProdDetails.BOMID(data[k].BOMID);
            if(data[k].priceStat === "Draft")
            {
            temppricingProdDetails.selectedChoice(self.pricingstatus[1]);
                console.log(temppricingProdDetails.selectedChoice().Name);
            }
            else
            {
                temppricingProdDetails.selectedChoice(self.pricingstatus[0]);
                 console.log(temppricingProdDetails.selectedChoice().Name);
            }
            tempArray.push(temppricingProdDetails);
            self.simpleSearchResultsArray.push(temppricingProdDetails);
        }
    }
};

如果我不认错你的问题 - Here is sample in jsfiddle

您还可以通过here

学习和参考

您也可以在knockoutjs学习网站的this tutorial找到。

答案 1 :(得分:0)

selectedChoice()的价值不是您所期望的。所以它始终显示红色女巫是默认选择。