kendo ui - 为什么按钮点击刷新页面?

时间:2014-06-05 13:16:25

标签: kendo-ui kendo-mvvm

请在下面找到我的代码:

客户搜索表单模板

<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页面。

我可以知道为什么这个按钮点击刷新页面,如何在点击按钮时停止刷新页面

1 个答案:

答案 0 :(得分:3)

我会尝试为每个属性设置属性'type',如下所示:

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

页面认为每个人都在执行表单提交操作,但是通过放置type属性,您可以访问要搜索的事件。如果您不打算发布任何数据,则可能不需要表单标记,而只需要js事件处理程序。祝你好运。