重置可觀察的表格字段敲除

在我的MVC項目中，我有一個視圖有3個表單和一個KO ViewModel。重置可觀察的表格字段敲除

在每個窗體上我都有一個重置按鈕來清除自己的字段。

我不能使用input type="reset"因爲它不更新觀察到的值。

我也不能復位View Model，因爲這將重置的View Model的所有的觀測，我只需要重置是觸發復位在窗體上的人。

我可以寫3個功能，每一個表格，並手動刪除這樣每個表單字段：

this.onForm1Reset = function() { 
    this.field1(''); 
    this.field2(''); 
    //etc.. 
} 

this.onForm2Reset = function() { 
    this.field3(''); 
    this.field4(''); 
    //etc.. 
} 

this.onForm3Reset = function() { 
    this.field5(''); 
    this.field6(''); 
    //etc.. 
}

但是我正在尋找一個更加全球化和更短的解決方案。

我做了很多的研究網上也沒有找到應該是一個很好的解決方案。

任何幫助將非常感激。

來源

2016-08-23 user3378165

'this.field1（）='''不重置該字段。 'this.field1（''）'確實 – haim770

你是完全正確的，謝謝！ – user3378165

如果能基的形式字段，可以使用一個with每個表單上的結合，以提供不同context到窗體部件，因此reset函數（作爲點擊事件處理）連接到復位按鈕將只以自己的形式觀察觀察對象。

如果不能組的字段，一個（不太優選的）的可能性是通過包含復位按鈕的形式的結合的元件來運行，復位它們的值，並觸發更改事件他們。我的代碼片段中的註釋代碼會這樣做。

vm = { 
 
    fieldset1: { 
 
     field0: ko.observable(), 
 
     field1: ko.observable() 
 
    }, 
 
    fieldset2: { 
 
     field2: ko.observable(), 
 
     field3: ko.observable() 
 
    }, 
 
    fieldset3: { 
 
     field4: ko.observable(), 
 
     field5: ko.observable() 
 
    }, 
 
    reset: function(data) { 
 
     for (var key in data) { 
 
     if (data.hasOwnProperty(key)) { 
 
      data[key](''); 
 
     } 
 
     } 
 
    }; 
 

 
    ko.applyBindings(vm); 
 

 
    /* 
 
    $('body').on('click', '[type="reset"]', function() { 
 
     $(this.parentNode).find('[data-bind*="value:"]').each((index, item) => { 
 
     $(item).val('').change(); 
 
     }); 
 
    }); 
 
    */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<form data-bind="with: fieldset1"> 
 
    <input data-bind="value:field0" /> 
 
    <input data-bind="value:field1" /> 
 
    <input type="reset" data-bind="click: $parent.reset" /> 
 
</form> 
 

 
<form data-bind="with: fieldset2"> 
 
    <input data-bind="value:field2" /> 
 
    <input data-bind="value:field3" /> 
 
    <input type="reset" data-bind="click: $parent.reset" /> 
 
</form> 
 

 
<form data-bind="with: fieldset3"> 
 
    <input data-bind="value:field4" /> 
 
    <input data-bind="value:field5" /> 
 
    <input type="reset" data-bind="click: $parent.reset" /> 
 
</form>

來源

2016-08-23 18:02:35

謝謝你的回答，我有兩個問題：1-我不知道我是否可以組字段，我怎麼知道如果我可以將他們分組？（對不起，如果這是一個愚蠢的問題..）2-我已經計算出每種形式的字段，這是否會用到？ – user3378165

如果viewModel的結構由您決定，您可以對它們進行分組。如果您獲得禁止更改的viewModel結構，則不能。（2）是的，計算結果可以在整個系統中使用任何可觀察量。 –

謝謝viewModel取決於我，所以我可以改變它，我只是試過它，但出於某種原因，我得到了lambda表達式附近的語法錯誤：'語法錯誤'任何想法爲什麼？非常感謝您的幫助！ – user3378165

一個更實際的解決辦法是包含在可觀測的視圖模型，並在復位時重新創建模型：

function MyViewModel() 
{ 
    this.field1 = ko.observable(); 
    this.field2 = ko.observable(); 

    // etc... 
} 

var model = { 
    data: ko.observable(new MyViewModel()), 
    reset: function() { 
     model.data(new MyViewModel()); 
    } 
}; 

ko.applyBindings(model);

而在你的HTML：

<body data-bind="with: data"> 
    ... 
    <button data-bind="click: $root.reset">Reset</button> 
</body>

見Fiddle

更新（根據您的評論）：

既然你不想更換整個視圖模型，但僅重置某些領域，我認爲你必須引入一個reset()方法模型：

function MyViewModel() 
{ 
    this.field1 = ko.observable(); 
    this.field2 = ko.observable(); 

    this.reset = function() { 
     this.field1(''); 
     this.field2(''); 
    }.bind(this); 
} 

ko.applyBindings(new MyViewModel());

而在你的HTML：

<button data-bind="click: reset">Reset</button>

來源

2016-08-23 11:57:02 haim770

謝謝你的回答，但我不認爲它適合我的情況，這將重置**整個** View Model'，而我只需要重置它的一部分。 'View Model'包含3個表單的數據，每次需要重新設置一個表單.. – user3378165

@ user3378165，那麼我想你可以將重置操作視爲你的視圖模型的邏輯部分，這意味着你將擁有引入一個'reset（）'方法作爲你的視圖模型的一部分，它將負責重置所需的字段。 – haim770

我不確定你的意思，你能給我一個如何做的例子嗎？ – user3378165

您也可能要考慮分割你的視圖模型到一個單獨的虛擬機每個表單（田集團）。
使用這種方法，您可以重新創建相應的ViewModel來重置窗體。

來源

2016-08-23 12:33:26 jbin

謝謝，我原來是這麼做的，但我不得不將它改爲一個虛擬機，因爲這些表單相互依賴......（某些計算值基於其他形式的可觀察值。） – user3378165

好的。所以既然我明白這不是最優雅的方式，所以訂閱另一個虛擬機中的可觀察元素應該比單獨重置方法更復雜，可能後者更實用。 – jbin

這就是我的問題，我問這個問題，也許有人想到任何絕妙的主意...... – user3378165

會是這樣的工作？你有什麼功能來清空observables？取決於點擊重置？

this.emptyObservablesRestForm1 = function() { 
    this.field1(false); 
} 


this.emptyObservablesRestForm2 = function() { 
     this.field2(false); 
    }

來源

2016-08-23 20:39:52 Aurora

謝謝你，我在我的問題寫道，這個選項是次優的，我不知道想寫這樣的3個函數，並明確寫入所有要重置的字段。 – user3378165

重置可觀察的表格字段敲除

回答

相關問題