Knockout.js：如何通过脚本程序化给视图模型分配属性？

嘿，我太懂你这种重复写相似代码的烦躁了——每次都要手动创建带focused子属性的observable，不仅啰嗦还容易出错。咱们可以用工厂函数来封装这个重复逻辑，让视图模型的代码瞬间清爽起来。

第一步：封装可聚焦的Observable工厂 #

先写一个通用的工厂函数，专门生成带focused状态的observable：

function createFocusableObservable(initialValue = "") {
  const observable = ko.observable(initialValue);
  // 给observable附加focused子属性
  observable.focused = ko.observable(false);
  return observable;
}

这个函数做了两件事：创建基础的observable，然后给它绑定一个focused子observable（默认值为false）。你可以根据需求调整初始值的默认设置，或者后续扩展更多配置项。

第二步：在视图模型里批量生成属性 #

有了工厂函数，你就不用再重复写冗余代码了。可以直接调用工厂函数创建单个属性，或者用数组循环批量生成多个属性：

function aViewModel() {
  const self = this;
  
  // 单个创建属性（支持自定义初始值）
  self.attr1Text = createFocusableObservable();
  self.attr2Text = createFocusableObservable("默认填充文本");
  
  // 批量创建多个属性
  const attributeList = ["attr3Text", "attr4Text", "attr5Text"];
  attributeList.forEach(attrName => {
    self[attrName] = createFocusableObservable();
  });
}

不管你有多少个需要带focused状态的属性，都能轻松搞定，再也不用复制粘贴重复代码了。

进阶：可配置的工厂函数（可选） #

如果你的属性有不同需求（比如部分属性默认聚焦，或者初始值特殊），可以给工厂函数添加配置参数：

function createFocusableObservable(options = {}) {
  const { initialValue = "", initialFocused = false } = options;
  const observable = ko.observable(initialValue);
  observable.focused = ko.observable(initialFocused);
  return observable;
}

// 使用示例
self.attr6Text = createFocusableObservable({
  initialValue: "预加载内容",
  initialFocused: true
});

为什么这是好方案？ #

• 减少重复代码：把重复逻辑封装到工厂函数，避免复制粘贴带来的疏漏
• 易于维护：如果以后要修改focused的逻辑（比如加默认值、扩展方法），只需要改工厂函数，不用逐个修改属性
• 扩展性强：可以随时给工厂函数添加新配置项，满足不同属性的个性化需求

这样你的视图模型代码会变得非常简洁，逻辑统一，维护起来也轻松多啦！

内容的提问来源于stack exchange，提问作者user2738183