Knockout.js 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

Simple list

这个例子展示的是绑定到数组上。

注意到,只有当你在输入框里输入一些值的时候,Add按钮才可用。

代码如下:

<form data-bind="submit: addItem">
    New item:
    <input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
    <button type="submit" data-bind="enable: itemToAdd().length > 0">Add
    </button>
    <p>Your items:</p>
    <select multiple="multiple" width="50" data-bind="options: items">
    </select>
</form>
var viewModel = {};
viewModel.items = ko.observableArray(["Alpha", "Beta", "Gamma"]);
viewModel.itemToAdd = ko.observable("");
viewModel.addItem = function () {
    if (viewModel.itemToAdd() != "") {
        viewModel.items.push(viewModel.itemToAdd()); //添加元素
        viewModel.itemToAdd("");      // 清除文本框中的值            
    }
}
ko.applyBindings(viewModel);