kendo ui - لماذا تنقر على الزر لتحديث الصفحة؟

Question

تجدون أدناه الكود الخاص بي:

نموذج نموذج بحث العملاء

<script type="text/x-kendoui-template" id="customer-search-view-template">
    <div class="searchform" id="searchCustomer">
        <form class="frmSearch">
            <input name="searchTxt" data-bind="value: customerName" class="k-textbox" />
            <button class="k-button" data-bind="click: searchClicked">Search</button>
            <button class="k-button" data-bind="click: newClicked">New</button>
        </form>             
    </div>
</script>

customer-search.js حيث يتم تحميل القالب أعلاه وإنشاء كائن viewmodel

$(function(){

    var views = {};
    templateLoader.loadExtTemplate("customer-search-view-template", "../views/customer-search-template.html");

    var layout = new kendo.Layout($('#customer-search-view-template').html());
    layout.render($("#main"));

    // Create an observable view model object.
    var customer = kendo.observable({
        customerName: "John",

        searchClicked: function() {
            this.set("customerName", "Search clicked");         
        },

        newClicked: function() {
            this.set("customerName", "New clicked");            
        }

    });

    // Bind the view model to the personFields element.
    kendo.bind($('#searchCustomer'), customer);

});

عندما أنقر على زر البحث، يتم تعيين النص في مربع النص ولكن هذا يؤدي أيضًا إلى تحديث الصفحة ?searchTxt=Search+clicked في شريط العناوين.

هل لي أن أعرف لماذا هذا الزر انقر فوق تحديث الصفحة وكيف يمكنني إيقاف تحديث الصفحة عند النقر فوق الزر ؟؟؟

Answer 1

سأحاول وضع السمة "نوع" لكل منها كما يلي:

<button type="button" class="k-button" data-bind="click: searchClicked">Search</button>
<button type="button" class="k-button" data-bind="click: newClicked">New</button>

تعتقد الصفحة أن كل منها يقوم بإجراء إرسال نموذج، ولكن عن طريق وضع سمة النوع، يمكنك الوصول إلى الحدث الذي تنوي البحث عنه.قد لا تحتاج إلى علامات النموذج الخاصة بك إذا كنت لن تقوم بنشر أي بيانات، بل مجرد معالج أحداث js.حظ سعيد.