最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to bind a div widthheight to form fields? - Stack Overflow

programmeradmin1浏览0评论

I want to create a number of divs that I can move and resize, and bind their width, height, etc. to an object in an array. So, if I create six divs, I have six objects in my array, each object having .width, .height, etc.

I don't quite understand how I would bind the input and span text to the array object properties using knockout.js. Here's my attempt:

var counter = 0;
var objects = [];

$(document).ready(function () {
    dostuff($("#main"));  // give it a target container div
});

function dostuff(target) {
    counter++;
    // create a div containing a span and an input that binds to knockout.js

    target.append('<div id="d' + counter + '">width:<span id="d' + counter +
        '" data-bind="text:objects[' + counter + '].width"></span>' +
        '<input type="text" id="d' + counter + 
        '" data-bind="value:objects[' + counter + '].width"/></div>');

    var a = $("#d" + counter);
    a.css("position", "absolute");
    a.css("width", "100px");
    a.css("height", "100px");
    a.css("background-color", "#" + 
        Math.ceil(Math.random()*9) + "0" +
        Math.ceil(Math.random()*9) + "0" +
        Math.ceil(Math.random()*9) + "0");
    a.resizable({
        stop: function (e, ui) {
            this.childNodes[2].value = ui.size.width; 
        }
    });
    objects[counter] = { width: "100px", height: "100px", 
        top: "0px", left: "0px" };
    ko.applyBindings(objects[counter]);
}

How would I get the objects[1].width to bind to the div d1's <input> value?

I want to create a number of divs that I can move and resize, and bind their width, height, etc. to an object in an array. So, if I create six divs, I have six objects in my array, each object having .width, .height, etc.

I don't quite understand how I would bind the input and span text to the array object properties using knockout.js. Here's my attempt:

var counter = 0;
var objects = [];

$(document).ready(function () {
    dostuff($("#main"));  // give it a target container div
});

function dostuff(target) {
    counter++;
    // create a div containing a span and an input that binds to knockout.js

    target.append('<div id="d' + counter + '">width:<span id="d' + counter +
        '" data-bind="text:objects[' + counter + '].width"></span>' +
        '<input type="text" id="d' + counter + 
        '" data-bind="value:objects[' + counter + '].width"/></div>');

    var a = $("#d" + counter);
    a.css("position", "absolute");
    a.css("width", "100px");
    a.css("height", "100px");
    a.css("background-color", "#" + 
        Math.ceil(Math.random()*9) + "0" +
        Math.ceil(Math.random()*9) + "0" +
        Math.ceil(Math.random()*9) + "0");
    a.resizable({
        stop: function (e, ui) {
            this.childNodes[2].value = ui.size.width; 
        }
    });
    objects[counter] = { width: "100px", height: "100px", 
        top: "0px", left: "0px" };
    ko.applyBindings(objects[counter]);
}

How would I get the objects[1].width to bind to the div d1's <input> value?

Share Improve this question edited Feb 21, 2014 at 20:57 Jeroen 63.9k46 gold badges228 silver badges366 bronze badges asked Apr 10, 2011 at 8:45 Zachary ScottZachary Scott 21.2k35 gold badges124 silver badges208 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 5

The minimal amount of changes that you would have to make to get this to happen would be doing something like:

 target.append('<div id="d' + counter + '" data-bind="style: { width: width , height: height, top: top, left: left } }">width:<span id="d' + counter +
        '" data-bind="text: width"></span>' +
        '<input type="text" id="d' + counter + 
        '" data-bind="value: width"/></div>');

So, this uses the style binding on your main div. Also, since you are calling applyBindings on objects[counter] you can reference the properties directly in the bindings (rather than through objects[counter]).

If you are calling this function multiple times, then you will want to be careful with how you call ko.applyBindings. If you do not pass a second parameter, then it will apply to the entire document. You really only want to do that one time. In your case, you would likely want to pass a second parameter to indicate the exact root element to start with. So, you would call something like ko.applyBindings(objects[counter], $("#d" + counter)[0]);

I don't know of your exact use case, but if it was me, I would create my array of objects first and then use a template to build the divs. Then, in the markup I would have a container that calls the template binding with the foreach option passing the array. Then, you would create a template that contains the markup for each div. This way you can avoid building the markup as strings. If you want an example of doing something like that, let me know.

Hope this helps.

发布评论

评论列表(0)

  1. 暂无评论