CanJS click event implementation

Question

I am using CanJS (a js framework) for my project, but I have a problem.

I've written some code in book.js as follows:

Book = can.Model({
    create: 'POST site/book'
},{});

Books = can.Control({
        
        '.gotoPrevPage click' : function(){
            b= new Book({name:"newbook1"});
            b.save();
        }
});

and also, my html file is as follows:

...
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/can.jquery-1.0.7.min.js"></script>
<script type="text/javascript" src="js/book.js"></script>
...
<div class="twopageDoc">

    <div class="gotoPrevPage"></div>

    <div class="leftPage">

        <img src="images/1.jpg" />

    </div>

    <div class="rightPage">

        <img src="images/2.jpg" />

    </div>

    <div class="gotoNextPage"></div>

</div>
...

Now, when I click on div with class gotoPrevPage event doesn't work and I don't see any errors, but when I use Chrome console and write down the 2 lines code of the above event the POST is done and it works. I don't know the reason.

score 4 · Answer 1 · answered Nov 10 '12 at 11:36

4

From your code it looks like you didn't initialize the controller. You should create instance of the Books on the DOM element:

new Books('.twpopageDoc')

answered Nov 10 '12 at 11:36

retro

600
7
8

Thanks for your concern, but where do this code should be ? I added this to code but it doesn't work yet. – Mostafa Etemadian Nov 10 '12 at 12:17
can.Control while instantiating should receive jQuery selector as first parameter and properties as second parameter. But While you instantiating your Books Control using new Books('.twpopageDoc') - element with class 'twpopageDoc' should be already exist in DOM. Otherwise event won't be catched by can.Control – CoolEsh Nov 27 '12 at 13:30

CanJS click event implementation

1 Answers1