zoukankan      html  css  js  c++  java
  • Knockout自定义绑定数据逻辑

    //定义绑定,http://knockoutjs.com/documentation/custom-bindings.html
    ko.bindingHandlers.[CustomLogic]={
        init:function(element,valueAccessor,allBindings,viewModel,bindingContext){}
        update:functing(element,valueAccessor,allBindings,viewModel,bindingContext){}
    } 
    //element: 调用绑定的dom元素;
    //valueAccessor : 值访问者,可以获取到当前绑定的值;
    //allBindings : 元素所有的绑定,可以获取到当前对象所有注册的绑定;
    //viewModel : Model对象,可以获取到当前对象model的所有值;
    //bindingContext : 上下文对象,$data、$index、$parent、$parentContext、$parents、$rawData、$root、$ko
    <!--使用绑定-->
    <div data-bind="yourBindingName: someValue"> </div>
    var ko = require("knockout");
    var komap = require("/scripts/plugins/knockout/knockout.mapping.js");
    _viewListModel = komap.fromJS(data);

    ko.bindingHandlers.datePicker = {
         init:
    function (element, valueAccessor, allBindingsAccessor, viewModel) {

             //注册监听值改变事件
             ko.utils.registerEventHandler(element,
    "change", function () {
                 
    var value = valueAccessor();

                  //转换
                 
    var string = "/Date(" + moment(element.value, "YYYY-MM-DD HH:mm").valueOf() + "+0800)/";

                  //转换后的值给原model
                  value(string);
               });
         },
        
    // Update the control whenever the view model changes
         update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                var value = valueAccessor();
                element.value
    = moment(value()).format("YYYY-MM-DD HH:mm");
         }
    };

    //绑定视图数据

    ko.applyBindings({ lists: _viewListModel }, document.getElementById("listBody"));

    <input type="text" data-bind="datePicker: EndDateTime" />
  • 相关阅读:
    MySQL约束笔记
    MySQL 存储过程入门
    数据库范式
    Hibernate 懒加载 错误----no session
    复选框 checkbox 选中事件
    Hibernate 三种状态变化 与 sql 语句的关系
    Spring 4 + Hibernate 4 下 getCurrentSession()的使用情况
    35个java代码性能优化总结
    为什么 Java中1000==1000为false而100==100为true?AND "2+2=5"?
    MyBatis对象关联关系----多对多的保存与查询
  • 原文地址:https://www.cnblogs.com/qiumc/p/5984723.html
Copyright © 2011-2022 走看看