gpt4 book ai didi

javascript - 如何使用 Knockout 迭代 select 中的项目以显示范围值

转载 作者:行者123 更新时间:2023-11-28 20:34:10 27 4
gpt4 key购买 nike

有没有办法迭代选择列表中的项目并计算值。例如我有以下数据

“因素”:[ 20、 40、 60、 80、 100 ]

它目前在多选列表框中显示如下,我在 HTML 语句中计算级别0级:201级:402级:603级:804级:100

我想计算并显示一个起始值,如下所示;0级:0-201级:21-402级:41-603级:61-804级:81-100

当我显示当前级别时,如何才能回到 knockout 中的先前级别。例如,在选择列表框中,我显示 100,上一个级别是 80,但是当我显示 100 时,我想显示上一个级别 + 1 和当前级别 100,4级:81-100

用户可以更改这些值,因此他们可以输入 15、45、70、80、100 等因子。然后我想根据这些数字显示一个范围值,例如。 0-15、16-45 等

有什么方法可以在knockout/javascript/html中做到这一点

HTML:

 <select id="factorsSelect" multiple="multiple" size="10" data-bind="options:factors, selectedOptions:selectedFactors, 
optionsText: function(factor) {return 'Level ' + factors().indexOf(factor) + ': ' + factor}"></select>

JavaScript:

   function FactorInfo(projectid, adjustmentfactor, listpoints) {
this.projectid = ko.observable(projectid);
this.adjustmentfactor = ko.observable(adjustmentfactor);
this.listpoints = ko.observableArray(listpoints);


this.displayFactorName = ko.dependentObservable(function () {
return this.projectid() + " -- " + this.adjustmentfactor();
}, this);
}


// Factor construction
var Factor = function () {
this.factor = ko.observable();
};
// get project trusted data from wcf service
$.getJSON("../../Home/GetProjectTrustSettings", function (jsonData) {
var mappedGlobal = $.map(jsonData, function (item) {
vm.adjustmentFactor(item.AdjustmentFactor);
vm.mySelectedproject(item.ProjectId);
vm.factors(item.ListPoints);
return new FactorInfo(item.AdjustmentFactor, item.ProjectId, item.ListPoints);
});

});


var vm = {
//app observables
levelIdSize: ko.observable(""),
myGlobal: ko.observableArray([]),

// percent tab observables
percents: ko.observableArray([]),
percentlevelids: ko.observableArray([]),
selectedPercents: ko.observableArray([]).trackDirtyFlag(),
percentItemToAdd: ko.observable(""),
globalPercent: ko.observable("").extend({ required: "Enter a Global Percent, between 1 and 100." }).trackDirtyFlag(),
levelSize: ko.observable(""),



// factor tab observables
factors: ko.observableArray([]),
factorlevelids: ko.observableArray([]),
selectedFactors: ko.observableArray([]).trackDirtyFlag(),
factorItemToAdd: ko.observable(""),
adjustmentFactor: ko.observable("").extend({ required: "Enter an Adjustment Factor, between 1 and 100." }).trackDirtyFlag(),

// project observable
myProject: ko.observableArray([]),
mySelectedproject: ko.observable("1"),
projectIdChange: ko.observable(false),

// check if something changes with project ID
setProjectDirtyFlag: function () {
this.projectIdChange(true);
//console.log(this.projectIdChange());
}

};

使用 MVC 格式:模型: 使用系统; 使用 System.Collections.Generic; 使用 System.Linq; 使用 System.Web;

 namespace AuditReview.Models
{
public class ProjectTrustSetting
{
public string ProjectId { get; set; }
public int AdjustmentFactor { get; set; }
public List<int> ListPoints { get; set; }
}
}

Controller 数据示例:

  public JsonResult GetProjectTrustSettings()
{
//create list
var trustSetting = new List<ProjectTrustSetting>
{
new ProjectTrustSetting
{
ProjectId = "30729",
AdjustmentFactor = 5,
ListPoints = new List<int>
{ 20, 40, 60, 80, 100}
}
};

return Json(trustSetting, JsonRequestBehavior.AllowGet);
}

寻找创建起始范围值的最佳方法,无论是在 knockout 、HTML、JavaScript 中。我想应该有某种方法可以在 HTML 中在我已有的功能内完成此操作。

optionsText: function(factor) {return 'Level ' + Factors().indexOf(factor) + ': ' + Factor},或在 knockout 中作为计算的可观察量或任何其他建议。

感谢您的帮助

最佳答案

您可以在 View 模型上创建一个函数来处理标签的生成。如果您向绑定(bind)提供函数,它将传入当前上下文作为第一个参数,因此您可以执行以下操作:

<select data-bind="options: levels, 
optionsText: label,
selectedOptions: selectedLevels" multiple="true"></select>

self.label = function(level) {
var index = self.levels().indexOf(level);
if (index === 0) {
return level.name() + " 0-" + level.level();
} else {
var floor = self.levels()[index -1].level() + 1;
return level.name() + " " + floor + "-" + level.level();
}
};

这里是a fiddle展示这是如何工作的。

关于javascript - 如何使用 Knockout 迭代 select 中的项目以显示范围值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15769191/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com