0

選択した要素のテキスト値を検出し、ポップアップ ウィンドウに入力しようとしているサンプルがあります。jQuery を使用してこれを行う方法は知っていますが、ビューモデルに Ui を認識させたくありません。簡単なものが欠けていることはわかっていますが、UIで選択された要素からテキスト値をバインドし、それをKnockout内の別のオブザーバブルにバインドするために何をする必要があるかを誰かが説明できますか.

完全に動作するJsFiddle

ここの CSS を差し引いたものは、これまでに接続した html と JS です。

<ul data-bind="foreach: items">
    <li class="divContainer"> <span title="filename" class="tbox" data-bind="text: name, click: $root.openControl "></span>
 <span title="description" class="tbox" data-bind="text: description"></span>

    </li>
</ul>
<div id="nameDiv" class="nameContainer"> <span class="smallTitle"></span>

    <input type="textbox" class="mytextbox" data-bind="value: currentField" />
    <input type="button" id="SaveChange" class="editbtn" value="&#x2714;" />
    <input type="button" id="CancelChange" class="editbtn" value="&#x2716;" />
</div>

JS

var Item = function (name, description) {
    this.name = ko.observable(name);
    this.description = ko.observable(description);
}

    function myViewModel() {
        var self = this;
        //sample list of items
        self.items = ko.observableArray([
        new Item('item 1', ' item 1 Description'),
        new Item('item 2', 'item 2 Description'),
        new Item('item 3', 'Report3 Description'),
        new Item('item 4', 'Report4 Description')]);

        //observable fields
        self.currentField = ko.observable("");

        //bind current item text to field
        self.openControl = function () {
            self.currentField($(this)); ///Here I need to pick up the text of the item that was clicked on
        };
    };

ko.applyBindings(new myViewModel());

function positionDiv(x_pos, y_pos) {

    var d = document.getElementById('nameDiv');
    d.style.display = 'none';
    d.style.position = 'absolute';
    d.style.left = x_pos + 'px';
    d.style.top = y_pos + 'px';
    $('#nameDiv').fadeIn('slow');
}
$('.tbox').click(function () {
    var myText = $(this);
    var t = $(this).attr('title');
    if (t === 'filename') {
        $('.smallTitle').text('Enter new filename');
    } else {
        $('.smallTitle').text('Enter new description');
    }
    displayEditBox(myText);
});


function displayEditBox(myText) {

    //determine middle of span element
    var offset = myText.offset();
    var width = myText.width();
    var height = myText.height();
    var centerX = offset.left + width + 5;
    var centerY = offset.top - 10;

    positionDiv(centerX, centerY);
}

$('#CancelChange').click(function () {
    $('#nameDiv').fadeOut('fast');
    clearField($('.mytextbox'));
});

function clearField(field_name) {
    field_name.val('');
}

前もって感謝します、

4

1 に答える 1

3

openControlパラメータを取るように関数の定義を変更します。

self.openControl = function (item) {
    self.currentField(item.description());
};

これは、クリックが適用されたitem(配列の要素items) である必要があります。これは、バインディングが作成される場所ではclick、データ コンテキストがforeach: itemsバインディングの本体であるためです。

于 2013-08-28T19:49:43.150 に答える