如何使用视图包对象并通过点击进行修改
本文关键字:修改 视图 何使用 包对象 对象 | 更新日期: 2023-09-27 18:34:45
我有一个状态下拉列表,其中包含从 ViewBag 加载的选项。Knockout 正在将 ViewBag 对象替换为任何内容。我该怎么做A. 将 (IEnumerable(ViewBag.States 传递到淘汰赛和B. 修改 onclick 事件后的下拉列表以显示已修改(IEnumerable(的状态。
这就是我被困住的地方...提前感谢!
CSHTML
@(Html.DropDownList("State", (IEnumerable<SelectListItem>)ViewBag.States, "Any", new { @class = "fieldState", data_bind = "options: $root.setStates, optionsText: 'st', value: 'fullName'" }))
从onclick事件触发的Javascript
pageViewModel.setDropdown().setStates.push(new SetDropdown());
JS文件
self.setDropdown = ko.observable(new SetDropdown());
function SetDropdown(stateIS02, longName) {
var self = this;
self.setStates = ko.observableArray();
this.st = stateIS02;
this.name = longName;
}
我现在没有想法了...
<p>
State:
<select data-bind="options: $root.states, optionsText: 'Name', optionsValue : 'Id', value: selectedState, optionsCaption: 'Choose...'"></select>
<br />Selected State value:
<span data-bind="text: selectedState"></span>
</p>
<script>
var stateData = @Html.Raw(Json.Encode(ViewBag.States));
</script>
<script type="text/javascript">
// Constructor for an object with two properties
var State = function (id, name) {
this.Id = id;
this.Name = name;
};
var initialState = new Array();
if (stateData.length > 0) {
for (var k = 0; k < stateData.length; k++) {
initialState.push(new State(stateData[k].Value, stateData[k].Text));
}
}
var viewModel = {
states: ko.observableArray(initialState),
selectedState: ko.observable() // Nothing selected by default
};
ko.applyBindings(viewModel);
</script>
经过几个小时的研究,我想通了!
我在 javascript 端的单击事件上设置了数据绑定属性。我现在也在循环中使用 push 函数来设置状态。
pageViewModel.setStates.push({ shortState : "VA", fullName: "Virginia"}); //will be in a loop
$("#State").attr('data-bind', "options: $root.setStates, optionsText: function(item) { return item.shortState; }, value: function(item){ return item.fullName;}");
ko.applyBindings(pageViewModel);