2

ビューをビューモデルにバインドするためにノックアウトを使用しています。

私は次のように考えています。

<table>
   <tr>
      <td  data-bind ="text: ConcenatedData"></td>
   </tr>
</table>

私のビューモデルはajax呼び出しを行い、データを監視可能な配列にバインドします

function showData() {
    return $.ajax({
        url: "../Service/EmpData",
        type: "PUT",
        contentType: 'application/json',
        processData: false,
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        },
        success: function (allData) {
            var Data = $.map(allitems, function (item) {
                return new EmpList(item);
            });
            self.EmployeeData(Data);
        }
    });
}

function EmpList(items) {
    this.EmpName = ko.observable(data.EmpName);
    this.EmpId = ko.observable(data.EmpId);
    this.ConcenatedData = ko.observable(data.ConcenatedData);
}

オブザーバブルでデータを次のように取得します<temp>Is this Emp required</temp>in our company

だから私はタグの間のテキストを太字にしたい ので、<temp> and </temp>.出力はIs this Emp required in our company`

これを達成する方法は？

アップデート

ここでフィドルを作成しました。タグ間のテキストを<temp> and </temp>.太字にしたいです 。

4

3 に答える 3

3

ここに実用的なフィドルがあります：http://bit.ly/172W1TG

  • <temp>に変更<span>
  • text:に変更html:
  • .makeBold親を追加<tr>

  • このCSSを追加

    .makeBold スパン { font-weight: bold; border-bottom: 5px ベタ黒; }

于 2013-07-25T20:21:33.440 に答える
1

<temp>別の解決策は、と<val>タグを動的に<span>とに置き換えるノックアウト .js カスタム バインディングを使用すること"です。これは、将来、knockout.js を使用してさらに高度なカスタム バインディングを行う場合に役立つ可能性があります。

カスタム バインディングは次のようになります。

ko.bindingHandlers.boldText = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        val = valueAccessor().replace('<temp>', '<span class="makeBold">').replace('</temp>', '</span>').replace('<val>', '"').replace('</val>', '"');

        element.innerHTML = val;
    }
};

そして、次のバインドを行います。

<td data-bind="boldText: display"></td><td >&nbsp;&nbsp;&nbsp;</td>

ここで jsfiddle を参照してください: http://jsfiddle.net/PC54y/1/

于 2013-07-25T20:47:33.990 に答える
1

スパンを変更する必要のない別のソリューション (実際のタグであり、そうで<temp>はないため、スパンに変更する必要があります):

http://jsfiddle.net/TaF8W/69/

変化する：

<td data-bind="text: display"></td>

に：

<td data-bind="html: display"></td>

編集：

含める更新<val>- http://jsfiddle.net/TaF8W/70/

于 2013-07-25T20:25:52.053 に答える