2

チェックボックスとラジオボタンをきれいに見せるためにprettyCheckable jqueryプラグインを使用しています.data-bind = "checked：dateMode"を使用すると、プラグインが実際のチェックボックスを隠し、独自のオーバーライドhtmlをきれいにするため、機能しませんチェックボックス/ラジオをアップすると、ラジオまたはチェックボックスをチェックしてモデルの値を更新すると、ノックアウトjsライブラリが認識されません。prettyCheckable プラグインを使用しなくても自分のコードが正常に動作することはわかっているので、モデルやデータ バインディング コードがめちゃくちゃだとは言わないでください。これをテストしました。

https://github.com/arthurgouveia/prettyCheckable

これが私の部分ビューコードです。

<div id="DatesChooser" class="span5 pull-left">
    <h4><i class="icon-calendar"></i>Dates</h4>
    <input type="radio" name="Date" value="All" data-label="All Available" data-bind="checked: dateMode" /><br />
    <input type="radio" name="Date" value="Range" data-label="Range" data-bind="checked: dateMode" />
    <div data-bind="visible: dateMode() == 'Range'">
        <input type="text" id="FromYear" placeholder="1970" /> to
        <input type="text" id="ToYear" placeholder="2012" /><br />
        <div id="Date-Slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
            <div id="Date-Slider-Bar" class="ui-slider-range ui-widget-header" style="left: 0%; width: 100%;"></div>
            <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a>
            <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a>
        </div>
    </div>
</div>

ここに私のノックアウトモデルがあります:

function searchVm() {
    var self = this;
    self.dateMode = ko.observable("All");
    self.startSearch = function () { alert(self.dateMode()); };
};

そして、次のように prettyCheckable のものを初期化します。

$('input:checkbox').prettyCheckable();
$('input:radio').prettyCheckable();

以下は、prettyCheckable プラグインによってコードが変更された後にレンダリングされるコードです。入力スタイルが 'display:none' であることに注意してください。

<div id="DatesChooser" class="span5 pull-left">
    <div class="clearfix prettyradio labelright blue">
        <input type="radio" data-bind="checked: dateMode" data-label="All Available" value="All" name="Date" style="display: none;" checked="checked">
        <a class="checked" href="#"></a>
        <label for="undefined">All Available</label>
    </div>
    <br>
    <div class="clearfix prettyradio labelright blue">
        <input type="radio" data-bind="checked: dateMode" data-label="Range" value="Range" name="Date" style="display: none;">
        <a class="" href="#"></a>
        <label for="undefined">Range</label>
    </div>
    <div data-bind="visible: dateMode() == 'Range'" style="display: none;">
        <input id="FromYear" class="placeholder" type="text" placeholder="1970">
to
        <input id="ToYear" class="placeholder" type="text" placeholder="2012">
        <br>
        <div id="Date-Slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
            <div id="Date-Slider-Bar" class="ui-slider-range ui-widget-header" style="left: 0%; width: 100%;"></div>
            <a class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;" href="#"></a>
            <a class="ui-slider-handle ui-state-default ui-corner-all" style="left: 100%;" href="#"></a>
            <div class="ui-slider-range ui-widget-header" style="left: 0%; width: 100%;"></div>
        </div>
    </div>
 </div>
4

3 に答える 3

4

Pretty Checkablechangeはチェックボックスでイベントをトリガーしますが、Knockout はclickイベントを探します。prettyCheckable.jsこれは、 46 ～ 54 行目を変更することで修正できます。オリジナル：

    if (input.attr('checked') !== undefined) {
      input.removeAttr('checked').change();
    } else {
      input.attr('checked', 'checked').change();
    }

かわった：

    if (window.ko) {
      ko.utils.triggerEvent(input[0], 'click');
    } else {
      input.click();
    }

clickjQuery のトリガー関数を使用すると、ノックアウトも機能しません。上記のようにノックアウトを使用する必要がありますtriggerEvent。

jsFiddle: http://jsfiddle.net/mbest/4cX48/

于 2013-01-04T20:58:03.710 に答える
1

ここには何も問題はありません。Pretty Checkable ライブラリはそのように機能します。

入力 dom がそれらを非表示にし、その入力の代わりに動的な a および label タグを配置します。入力がチェックされているかどうかを確認したい場合は、動的に追加されたタグのクラス ( Class ="checked" ) を調べる必要があります。元の入力タグではありません。

prettycheckable のバインディングを作成し、タグのクラスを観察する必要があります。次に、そのタグのクラスに従って、バインディングのチェック済みの値を変更します。

http://knockoutjs.com/documentation/custom-bindings.html

于 2013-01-04T06:12:51.830 に答える
0

@MichaelによるprettyCheckboxへの変更はほとんど機能しましたが、ロード時にviewModelですでに選択が行われている場合、prettyCheckboxは「チェック済み」属性を探しているため、それを認識しません。プロパティ。

prettyCheckboxの変更：

var isChecked = el.attr('checked') !== undefined ? 'checked' : '';

に

var isChecked = el.prop('checked') == true ? 'checked' : '';

また、コードでノックアウトviewmodelプロパティを変更した場合、プロパティの変更をサブスクライブする方法（javascriptではノックアウトではない）を認識していないため、prettyCheckboxに反映されないことを知っておくことが重要です。

于 2013-03-04T19:37:53.653 に答える