knockout-js有关问题

knockout-js问题
如何在修改的时候给select联动一个指定的选中值，是knockout JS哦。
------解决思路----------------------
这个和knockoutjs 有什么大的关系么？ knockoutjs 不是负责数据绑定与在html上写代码解析数据么。能看看你具体的代码吗？
------解决思路----------------------
全页面无刷新的咯，以省市区联动为例：
var ViewModel = function () {
    var self = this;
    self.EditClick = function (item) {
        //指定城市
        self.GetCity(item.ProvinceID(),
            function () {
                $("#sel_City").val(item.CityID());
            }
            );
//设置指定区
        self.GetDistrict(item.CityID(),
            function () {
                $("#sel_District").val(item.DistrictID());
            }
            );

//指定省
        $("#sel_Province").val(item.ProvinceID());

    };

self.GetCity = function (provinceID,callback) {
        $.getJSON("URL", { "provinceID": provinceID }, function (result) {
            if (result.Success) {
                //self.CityList.removeAll();

                /*循环数据填充下拉项

*/
                if (callback) {
                    callback();
                }
            }
        });
    };

}
------解决思路----------------------
ready里的change以及预加载事件都写到ViewModel里好了，统一通过KO的框架进行调用

引用:

Quote: 引用:

这个和knockoutjs 有什么大的关系么？ knockoutjs 不是负责数据绑定与在html上写代码解析数据么。能看看你具体的代码吗？

@{

    ViewBag.Title = "Cascading DropDown using Knockout / WebAPI Sample";

}

<script src="~/Scripts/jquery-1.8.2.min.js"></script>

<script src="~/Scripts/knockout-2.2.0.js"></script>

 <script type="text/javascript">        

     $(document).ready(function () {

        

         FetchCountries();

         

            $("#Country").change(function () {

                var countryId = $("#Country").val();

               // alert($("#Country").html());

                //alert($("#Country").find("option:selected").text());

                $.ajax({

                    type: "GET",

                    url: "http://localhost:62830/api/Location/GetStates/" + countryId,

                    contentType: "application/json; charset=utf-8",

                    dataType: "json",

                    success: function (response) {

                        if (response != "") {

                            $(response).each(function (index, element) {

                                viewModel.stateCollection.push(element);

                            });

                            ko.applyBindings(viewModel);

                        }

                    }

                });

            });


            $("#State").change(function () {

                var stateId = $("#State").val();                

                $.ajax({

                    type: "GET",

                    url: "http://localhost:62830/api/Location/GetCities/" + stateId,

                    contentType: "application/json; charset=utf-8",

                    dataType: "json",

                    success: function (response) {

                        if (response != "") {

                            $(response).each(function (index, element) {

                                viewModel.cityCollection.push(element);

                            });

                            ko.applyBindings(viewModel);

                        }

                    }

                });

            });



            //$("#Country option[value='2']").attr("selected", true);

           // $("#Country option").eq(1).attr("selected", true);


            $("#test").click(function () {

                alert($("#Country").text());

            })


        });

    

        function FetchCountries() {

           

            viewModel = {

                countryCollection: ko.observableArray(),

                stateCollection: ko.observableArray(),

                cityCollection: ko.observableArray()

            };                     

            $.ajax({

                type: "GET",

                url: "http://localhost:62830/api/Location",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (response) {

                    if (response != "") {                        

                        $(response).each(function (index, element) {

                            viewModel.countryCollection.push(element);

                         

                        });

                        ko.applyBindings(viewModel);

                    }

                }

            });

        }

    </script>


<h2>Cascading DropDown using Knockout / WebAPI Sample</h2>


 Country Name: <select data-bind="options: countryCollection, optionsCaption: 'Choose country...',

    optionsValue: function (item) { return item.CountryId; },

    optionsText: function (item) { return item.CountryName; }, value: Country,

    valueUpdate: 'change'" id="Country" name="Country"></select>

<br />


State Name: <select data-bind="options: stateCollection, optionsCaption: 'Choose state...',

    optionsValue: function (item) { return item.StateId; },

    optionsText: function (item) { return item.StateName; },  value: State,

    valueUpdate: 'change'" id="State" name="State"></select>

<br />   


City Name: <select data-bind="options: cityCollection, optionsCaption: 'Choose city...',

    optionsValue: function (item) { return item.CityId; },

    optionsText: function (item) { return item.CityName; }, value: City,

    valueUpdate: 'change'" id="City" name="City"></select>

       


<input type="button" id="test" />

比如我绑定好了select我现在想通过一个参数来选中select的值怎么弄？

------解决思路----------------------

 var viewModel = {

        countries: ['Japan', 'Bolivia', 'New Zealand'],

        selectedCountry: ko.observable('Japan')

    };

    viewModel.selectedCountry = "Bolivia";

    ko.applyBindings(viewModel);

------解决思路----------------------
在你初始化页面时，应该仅仅绑定一次 viewModel 对象。然后每当刷新你的 viewModel 对象中的数据，界面就会自动响应。

不是每一次访问服务器都要生成新的 Model 对象，更不应该再次绑定！

相关推荐